@eui/eds 22.0.0-alpha.37 → 22.0.0-alpha.38

package/docs/json/EdsProgressBar.md

@@ -8,8 +8,8 @@ Horizontal progress indicator component that visualizes task completion or loadi
 Supports determinate progress with percentage values and indeterminate loading animations.
 Provides optional labeling and status icons for contextual feedback.
 
-Semantic color variants (`info`, `success`, `warning`, `critical`) are set via the `color`
-string input and size variants (`xs`, `s`, `m`, `l`) via the `size` string input, both
+Semantic color variants (`primary`, `success`, `warning`, `critical`) are set via the `color`
+string input and size variants (`m`, `l`) via the `size` string input, both
 reflected onto the host as attributes and styled with `:host([color="…"])` / `:host([size="…"])`.
 
 
@@ -23,5 +23,5 @@ reflected onto the host as attributes and styled with `:host([color="…"])` / `
 - **isIndeterminate**: `boolean` - When true, shows an indeterminate progress animation instead of a specific progress value. false
 - **label**: `string` - Optional label displayed above the progress bar. Also used as the accessible name.
 - **progress**: `number` - Current progress value (0–100). Values outside the range are clamped automatically. 0
-- **size**: `EdsProgressBarSize` - Size variant, reflected as the `size` host attribute. 's'
+- **size**: `EdsProgressBarSize` - Size variant, reflected as the `size` host attribute. 'm'
 - **valueText**: `string` - Human-readable text alternative for the current value. Use when the numeric percentage alone isn't meaningful (e.g. "Step 3 of 5", "Uploading file 2 of 10"). Maps to aria-valuetext.

package/docs/json/documentation.json

@@ -61794,7 +61794,7 @@
         },
         {
             "name": "EdsProgressBar",
-            "id": "component-EdsProgressBar-b09b04cceff8645a35d293b4521faed3909aa3c5e92b583782dfe2877b960e15b1ba7500f15b404c2b552620a28c963e727b3957965cd6fe7730862336cfbc19",
+            "id": "component-EdsProgressBar-4b9cceb01dd3d4bf2b98455cd3d6e9f7757004a9cc2550d0cff81f3867c0bd6c0b6ce194b8e18be994de485cefc8c0ef0d4fabd28295775d58951cc0cfe1a67f",
             "file": "packages/eds/eds-progress-bar/eds-progress-bar.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -61825,7 +61825,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Explicit accessible name for the progress bar. Use when there is no visible <code>label</code>\n(e.g. the bar sits in a table cell or under a custom header). Defaults to the visible\n<code>label</code> when set, otherwise a generic <code>&#39;Progress&#39;</code> so the progressbar always has a name\n(WCAG 1.1.1). Provide a specific value for context.</p>\n",
-                    "line": 66,
+                    "line": 67,
                     "rawdescription": "\n\nExplicit accessible name for the progress bar. Use when there is no visible `label`\n(e.g. the bar sits in a table cell or under a custom header). Defaults to the visible\n`label` when set, otherwise a generic `'Progress'` so the progressbar always has a name\n(WCAG 1.1.1). Provide a specific value for context.\n",
                     "required": false
                 },
@@ -61839,7 +61839,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Semantic color variant, reflected as the <code>color</code> host attribute.\nWhen unset, the default primary fill is used.</p>\n",
-                    "line": 87,
+                    "line": 88,
                     "rawdescription": "\n\nSemantic color variant, reflected as the `color` host attribute.\nWhen unset, the default primary fill is used.\n",
                     "required": false
                 },
@@ -61853,20 +61853,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Data attribute value for end-to-end testing identification.\n&#39;eds-progress-bar&#39;</p>\n",
-                    "line": 55,
+                    "line": 56,
                     "rawdescription": "\n\nData attribute value for end-to-end testing identification.\n'eds-progress-bar'\n",
                     "jsdoctags": [
                         {
-                            "pos": 2162,
-                            "end": 2195,
+                            "pos": 2210,
+                            "end": 2243,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 2163,
-                                "end": 2170,
+                                "pos": 2211,
+                                "end": 2218,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -61888,20 +61888,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>When true, displays a status icon based on the current color variant\n(success, warning, critical, info).\nfalse</p>\n",
-                    "line": 107,
+                    "line": 108,
                     "rawdescription": "\n\nWhen true, displays a status icon based on the current color variant\n(success, warning, critical, info).\nfalse\n",
                     "jsdoctags": [
                         {
-                            "pos": 3877,
-                            "end": 3897,
+                            "pos": 3925,
+                            "end": 3945,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 3878,
-                                "end": 3885,
+                                "pos": 3926,
+                                "end": 3933,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -61923,20 +61923,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>When true, shows an indeterminate progress animation\ninstead of a specific progress value.\nfalse</p>\n",
-                    "line": 100,
+                    "line": 101,
                     "rawdescription": "\n\nWhen true, shows an indeterminate progress animation\ninstead of a specific progress value.\nfalse\n",
                     "jsdoctags": [
                         {
-                            "pos": 3650,
-                            "end": 3670,
+                            "pos": 3698,
+                            "end": 3718,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 3651,
-                                "end": 3658,
+                                "pos": 3699,
+                                "end": 3706,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -61958,7 +61958,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Optional label displayed above the progress bar. Also used as the accessible name.</p>\n",
-                    "line": 58,
+                    "line": 59,
                     "rawdescription": "\nOptional label displayed above the progress bar. Also used as the accessible name.",
                     "required": false
                 },
@@ -61972,20 +61972,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Current progress value (0–100).\nValues outside the range are clamped automatically.\n0</p>\n",
-                    "line": 81,
+                    "line": 82,
                     "rawdescription": "\n\nCurrent progress value (0–100).\nValues outside the range are clamped automatically.\n0\n",
                     "jsdoctags": [
                         {
-                            "pos": 3115,
-                            "end": 3131,
+                            "pos": 3163,
+                            "end": 3179,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 3116,
-                                "end": 3123,
+                                "pos": 3164,
+                                "end": 3171,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -62000,34 +62000,34 @@
                 {
                     "name": "size",
                     "coverageIgnore": false,
-                    "defaultValue": "'s'",
+                    "defaultValue": "'m'",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "EdsProgressBarSize",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Size variant, reflected as the <code>size</code> host attribute.\n&#39;s&#39;</p>\n",
-                    "line": 93,
-                    "rawdescription": "\n\nSize variant, reflected as the `size` host attribute.\n's'\n",
+                    "description": "<p>Size variant, reflected as the <code>size</code> host attribute.\n&#39;m&#39;</p>\n",
+                    "line": 94,
+                    "rawdescription": "\n\nSize variant, reflected as the `size` host attribute.\n'm'\n",
                     "jsdoctags": [
                         {
-                            "pos": 3465,
-                            "end": 3483,
+                            "pos": 3513,
+                            "end": 3531,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 3466,
-                                "end": 3473,
+                                "pos": 3514,
+                                "end": 3521,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
                                 "transformFlags": 0,
                                 "escapedText": "default"
                             },
-                            "comment": "<p>&#39;s&#39;</p>\n"
+                            "comment": "<p>&#39;m&#39;</p>\n"
                         }
                     ],
                     "required": false
@@ -62042,7 +62042,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Human-readable text alternative for the current value.\nUse when the numeric percentage alone isn&#39;t meaningful\n(e.g. &quot;Step 3 of 5&quot;, &quot;Uploading file 2 of 10&quot;).\nMaps to aria-valuetext.</p>\n",
-                    "line": 74,
+                    "line": 75,
                     "rawdescription": "\n\nHuman-readable text alternative for the current value.\nUse when the numeric percentage alone isn't meaningful\n(e.g. \"Step 3 of 5\", \"Uploading file 2 of 10\").\nMaps to aria-valuetext.\n",
                     "required": false
                 }
@@ -62059,12 +62059,29 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Resolved accessible name for the host: an explicit <code>ariaLabel</code>, otherwise the visible\n<code>label</code>, otherwise a generic <code>&#39;Progress&#39;</code> fallback so the progressbar always has a name.</p>\n",
-                    "line": 113,
+                    "line": 114,
                     "rawdescription": "\n\nResolved accessible name for the host: an explicit `ariaLabel`, otherwise the visible\n`label`, otherwise a generic `'Progress'` fallback so the progressbar always has a name.\n",
                     "modifierKind": [
                         124,
                         148
                     ]
+                },
+                {
+                    "name": "statusIconColor",
+                    "coverageIgnore": false,
+                    "defaultValue": "computed<EdsIconStateColor>(() => {\n        const color = this.color();\n        return color && color !== 'primary' ? color : 'info';\n    })",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Status-icon color. The icon-state contract has no <code>primary</code> variant, so <code>primary</code> (and the\nunset/default primary state) map to the neutral <code>info</code> status icon; the semantic colors pass\nthrough unchanged.</p>\n",
+                    "line": 121,
+                    "rawdescription": "\n\nStatus-icon color. The icon-state contract has no `primary` variant, so `primary` (and the\nunset/default primary state) map to the neutral `info` status icon; the semantic colors pass\nthrough unchanged.\n",
+                    "modifierKind": [
+                        124,
+                        148
+                    ]
                 }
             ],
             "methodsClass": [],
@@ -62079,29 +62096,29 @@
                     "name": "EDS_ICON_STATE"
                 }
             ],
-            "description": "<p>Horizontal progress indicator component that visualizes task completion or loading states.\nSupports determinate progress with percentage values and indeterminate loading animations.\nProvides optional labeling and status icons for contextual feedback.</p>\n<p>Semantic color variants (<code>info</code>, <code>success</code>, <code>warning</code>, <code>critical</code>) are set via the <code>color</code>\nstring input and size variants (<code>xs</code>, <code>s</code>, <code>m</code>, <code>l</code>) via the <code>size</code> string input, both\nreflected onto the host as attributes and styled with <code>:host([color=&quot;…&quot;])</code> / <code>:host([size=&quot;…&quot;])</code>.</p>\n",
-            "rawdescription": "\n\nHorizontal progress indicator component that visualizes task completion or loading states.\nSupports determinate progress with percentage values and indeterminate loading animations.\nProvides optional labeling and status icons for contextual feedback.\n\nSemantic color variants (`info`, `success`, `warning`, `critical`) are set via the `color`\nstring input and size variants (`xs`, `s`, `m`, `l`) via the `size` string input, both\nreflected onto the host as attributes and styled with `:host([color=\"…\"])` / `:host([size=\"…\"])`.\n",
+            "description": "<p>Horizontal progress indicator component that visualizes task completion or loading states.\nSupports determinate progress with percentage values and indeterminate loading animations.\nProvides optional labeling and status icons for contextual feedback.</p>\n<p>Semantic color variants (<code>primary</code>, <code>success</code>, <code>warning</code>, <code>critical</code>) are set via the <code>color</code>\nstring input and size variants (<code>m</code>, <code>l</code>) via the <code>size</code> string input, both\nreflected onto the host as attributes and styled with <code>:host([color=&quot;…&quot;])</code> / <code>:host([size=&quot;…&quot;])</code>.</p>\n",
+            "rawdescription": "\n\nHorizontal progress indicator component that visualizes task completion or loading states.\nSupports determinate progress with percentage values and indeterminate loading animations.\nProvides optional labeling and status icons for contextual feedback.\n\nSemantic color variants (`primary`, `success`, `warning`, `critical`) are set via the `color`\nstring input and size variants (`m`, `l`) via the `size` string input, both\nreflected onto the host as attributes and styled with `:host([color=\"…\"])` / `:host([size=\"…\"])`.\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    computed,\n    input,\n    booleanAttribute,\n    numberAttribute,\n} from '@angular/core';\nimport { EDS_ICON_STATE } from '@eui/eds/eds-icon-state';\n\n/** Transform that clamps progress to 0–100 range. */\nconst progressTransform = (value: unknown): number => Math.max(0, Math.min(numberAttribute(value, 0), 100));\n\n/** Local narrowed color union — the progress-bar variant contract (String-Props model). */\nexport type EdsProgressBarColor = 'info' | 'success' | 'warning' | 'critical';\n\n/** Local narrowed size union — the progress-bar variant contract (String-Props model). */\nexport type EdsProgressBarSize = 'xs' | 's' | 'm' | 'l';\n\n/**\n * Horizontal progress indicator component that visualizes task completion or loading states.\n * Supports determinate progress with percentage values and indeterminate loading animations.\n * Provides optional labeling and status icons for contextual feedback.\n *\n * Semantic color variants (`info`, `success`, `warning`, `critical`) are set via the `color`\n * string input and size variants (`xs`, `s`, `m`, `l`) via the `size` string input, both\n * reflected onto the host as attributes and styled with `:host([color=\"…\"])` / `:host([size=\"…\"])`.\n */\n@Component({\n    selector: 'eds-progress-bar',\n    templateUrl: './eds-progress-bar.html',\n    styleUrl: './eds-progress-bar.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [...EDS_ICON_STATE],\n    host: {\n        class: 'eds-progress-bar',\n        role: 'progressbar',\n        '[attr.color]': 'color() || null',\n        '[attr.size]': 'size()',\n        '[attr.indeterminate]': 'isIndeterminate() || null',\n        '[attr.has-status-icon]': 'hasStatusIcon() || null',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '[attr.aria-valuenow]': '!isIndeterminate() ? progress() : null',\n        '[attr.aria-valuemin]': '\"0\"',\n        '[attr.aria-valuemax]': '\"100\"',\n        '[attr.aria-label]': 'resolvedAriaLabel()',\n        '[attr.aria-valuetext]': 'valueText() || null',\n    },\n})\nexport class EdsProgressBar {\n    /**\n     * Data attribute value for end-to-end testing identification.\n     * @default 'eds-progress-bar'\n     */\n    e2eAttr = input('eds-progress-bar');\n\n    /** Optional label displayed above the progress bar. Also used as the accessible name. */\n    label = input('');\n\n    /**\n     * Explicit accessible name for the progress bar. Use when there is no visible `label`\n     * (e.g. the bar sits in a table cell or under a custom header). Defaults to the visible\n     * `label` when set, otherwise a generic `'Progress'` so the progressbar always has a name\n     * (WCAG 1.1.1). Provide a specific value for context.\n     */\n    ariaLabel = input<string>('');\n\n    /**\n     * Human-readable text alternative for the current value.\n     * Use when the numeric percentage alone isn't meaningful\n     * (e.g. \"Step 3 of 5\", \"Uploading file 2 of 10\").\n     * Maps to aria-valuetext.\n     */\n    valueText = input('');\n\n    /**\n     * Current progress value (0–100).\n     * Values outside the range are clamped automatically.\n     * @default 0\n     */\n    progress = input(0, { transform: progressTransform });\n\n    /**\n     * Semantic color variant, reflected as the `color` host attribute.\n     * When unset, the default primary fill is used.\n     */\n    color = input<EdsProgressBarColor | null>(null);\n\n    /**\n     * Size variant, reflected as the `size` host attribute.\n     * @default 's'\n     */\n    size = input<EdsProgressBarSize>('s');\n\n    /**\n     * When true, shows an indeterminate progress animation\n     * instead of a specific progress value.\n     * @default false\n     */\n    isIndeterminate = input(false, { transform: booleanAttribute });\n\n    /**\n     * When true, displays a status icon based on the current color variant\n     * (success, warning, critical, info).\n     * @default false\n     */\n    hasStatusIcon = input(false, { transform: booleanAttribute });\n\n    /**\n     * Resolved accessible name for the host: an explicit `ariaLabel`, otherwise the visible\n     * `label`, otherwise a generic `'Progress'` fallback so the progressbar always has a name.\n     */\n    protected readonly resolvedAriaLabel = computed(() => this.ariaLabel() || this.label() || 'Progress');\n}\n",
+            "sourceCode": "import {\n    Component,\n    ChangeDetectionStrategy,\n    computed,\n    input,\n    booleanAttribute,\n    numberAttribute,\n} from '@angular/core';\nimport { EDS_ICON_STATE } from '@eui/eds/eds-icon-state';\nimport type { EdsIconStateColor } from '@eui/eds/eds-icon-state';\n\n/** Transform that clamps progress to 0–100 range. */\nconst progressTransform = (value: unknown): number => Math.max(0, Math.min(numberAttribute(value, 0), 100));\n\n/** Local narrowed color union — the progress-bar variant contract (String-Props model). */\nexport type EdsProgressBarColor = 'primary' | 'success' | 'warning' | 'critical';\n\n/** Local narrowed size union — the progress-bar variant contract (String-Props model). */\nexport type EdsProgressBarSize = 'm' | 'l';\n\n/**\n * Horizontal progress indicator component that visualizes task completion or loading states.\n * Supports determinate progress with percentage values and indeterminate loading animations.\n * Provides optional labeling and status icons for contextual feedback.\n *\n * Semantic color variants (`primary`, `success`, `warning`, `critical`) are set via the `color`\n * string input and size variants (`m`, `l`) via the `size` string input, both\n * reflected onto the host as attributes and styled with `:host([color=\"…\"])` / `:host([size=\"…\"])`.\n */\n@Component({\n    selector: 'eds-progress-bar',\n    templateUrl: './eds-progress-bar.html',\n    styleUrl: './eds-progress-bar.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [...EDS_ICON_STATE],\n    host: {\n        class: 'eds-progress-bar',\n        role: 'progressbar',\n        '[attr.color]': 'color() || null',\n        '[attr.size]': 'size()',\n        '[attr.indeterminate]': 'isIndeterminate() || null',\n        '[attr.has-status-icon]': 'hasStatusIcon() || null',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '[attr.aria-valuenow]': '!isIndeterminate() ? progress() : null',\n        '[attr.aria-valuemin]': '\"0\"',\n        '[attr.aria-valuemax]': '\"100\"',\n        '[attr.aria-label]': 'resolvedAriaLabel()',\n        '[attr.aria-valuetext]': 'valueText() || null',\n    },\n})\nexport class EdsProgressBar {\n    /**\n     * Data attribute value for end-to-end testing identification.\n     * @default 'eds-progress-bar'\n     */\n    e2eAttr = input('eds-progress-bar');\n\n    /** Optional label displayed above the progress bar. Also used as the accessible name. */\n    label = input('');\n\n    /**\n     * Explicit accessible name for the progress bar. Use when there is no visible `label`\n     * (e.g. the bar sits in a table cell or under a custom header). Defaults to the visible\n     * `label` when set, otherwise a generic `'Progress'` so the progressbar always has a name\n     * (WCAG 1.1.1). Provide a specific value for context.\n     */\n    ariaLabel = input<string>('');\n\n    /**\n     * Human-readable text alternative for the current value.\n     * Use when the numeric percentage alone isn't meaningful\n     * (e.g. \"Step 3 of 5\", \"Uploading file 2 of 10\").\n     * Maps to aria-valuetext.\n     */\n    valueText = input('');\n\n    /**\n     * Current progress value (0–100).\n     * Values outside the range are clamped automatically.\n     * @default 0\n     */\n    progress = input(0, { transform: progressTransform });\n\n    /**\n     * Semantic color variant, reflected as the `color` host attribute.\n     * When unset, the default primary fill is used.\n     */\n    color = input<EdsProgressBarColor | null>(null);\n\n    /**\n     * Size variant, reflected as the `size` host attribute.\n     * @default 'm'\n     */\n    size = input<EdsProgressBarSize>('m');\n\n    /**\n     * When true, shows an indeterminate progress animation\n     * instead of a specific progress value.\n     * @default false\n     */\n    isIndeterminate = input(false, { transform: booleanAttribute });\n\n    /**\n     * When true, displays a status icon based on the current color variant\n     * (success, warning, critical, info).\n     * @default false\n     */\n    hasStatusIcon = input(false, { transform: booleanAttribute });\n\n    /**\n     * Resolved accessible name for the host: an explicit `ariaLabel`, otherwise the visible\n     * `label`, otherwise a generic `'Progress'` fallback so the progressbar always has a name.\n     */\n    protected readonly resolvedAriaLabel = computed(() => this.ariaLabel() || this.label() || 'Progress');\n\n    /**\n     * Status-icon color. The icon-state contract has no `primary` variant, so `primary` (and the\n     * unset/default primary state) map to the neutral `info` status icon; the semantic colors pass\n     * through unchanged.\n     */\n    protected readonly statusIconColor = computed<EdsIconStateColor>(() => {\n        const color = this.color();\n        return color && color !== 'primary' ? color : 'info';\n    });\n}\n",
             "styleUrl": "./eds-progress-bar.scss",
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n:host {\n    --_eds-progress-bar-track-height: var(--eds-sp-2xs);\n    --_eds-progress-bar-fill: var(--eds-c-surface-primary);\n\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    position: relative;\n    width: 100%;\n\n    .eds-progress-bar__header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        margin-bottom: var(--eds-sp-xs);\n\n        &-label {\n            font: var(--eds-f-label-s);\n            color: var(--eds-c-foreground);\n        }\n\n        &-status {\n            display: flex;\n            align-items: center;\n        }\n    }\n\n    .eds-progress-bar__track {\n        background-color: var(--eds-c-surface-elevation-sunken);\n        border-radius: var(--eds-br-xs);\n        height: var(--_eds-progress-bar-track-height);\n        position: relative;\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .eds-progress-bar__indicator {\n        background-color: var(--_eds-progress-bar-fill);\n        border-radius: var(--eds-br-xs);\n        height: 100%;\n        transition: width 0.25s ease;\n    }\n}\n\n// SIZE VARIANTS\n:host([size=\"xs\"]) { --_eds-progress-bar-track-height: var(--eds-sp-3xs); }\n:host([size=\"s\"])  { --_eds-progress-bar-track-height: var(--eds-sp-2xs); }\n:host([size=\"m\"])  { --_eds-progress-bar-track-height: var(--eds-sp-xs); }\n:host([size=\"l\"])  { --_eds-progress-bar-track-height: var(--eds-sp-s); }\n\n// COLOR VARIANTS\n:host([color=\"info\"])     { --_eds-progress-bar-fill: var(--eds-c-surface-info); }\n:host([color=\"success\"])  { --_eds-progress-bar-fill: var(--eds-c-surface-success); }\n:host([color=\"warning\"])  { --_eds-progress-bar-fill: var(--eds-c-surface-warning); }\n:host([color=\"critical\"]) { --_eds-progress-bar-fill: var(--eds-c-surface-critical); }\n\n// INDETERMINATE ANIMATION\n:host([indeterminate]) {\n    .eds-progress-bar__indicator {\n        width: 100% !important;\n        background-color: transparent;\n        background-image: linear-gradient(\n            to right,\n            transparent 0%,\n            var(--_eds-progress-bar-fill) 30%,\n            var(--_eds-progress-bar-fill) 60%,\n            transparent 100%\n        );\n        background-size: 40% 100%;\n        background-repeat: no-repeat;\n        animation: eds-progress-indeterminate 1.5s infinite ease-in-out;\n    }\n}\n\n@keyframes eds-progress-indeterminate {\n    0%   { background-position: -40% 0; }\n    100% { background-position: 140% 0; }\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    --_eds-progress-bar-track-height: var(--eds-sp-3xs);\n    --_eds-progress-bar-fill: var(--eds-c-surface-primary);\n\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    position: relative;\n    width: 100%;\n\n    .eds-progress-bar__header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        margin-bottom: var(--eds-sp-xs);\n\n        &-label {\n            font: var(--eds-f-label-s);\n            color: var(--eds-c-foreground);\n        }\n\n        &-status {\n            display: flex;\n            align-items: center;\n        }\n    }\n\n    .eds-progress-bar__track {\n        background-color: var(--eds-c-surface-elevation-sunken);\n        border-radius: var(--eds-br-xs);\n        height: var(--_eds-progress-bar-track-height);\n        position: relative;\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .eds-progress-bar__indicator {\n        background-color: var(--_eds-progress-bar-fill);\n        border-radius: var(--eds-br-xs);\n        height: 100%;\n        transition: width 0.25s ease;\n    }\n}\n\n// SIZE VARIANTS\n:host([size=\"m\"]) { --_eds-progress-bar-track-height: var(--eds-sp-2xs); }\n:host([size=\"l\"]) { --_eds-progress-bar-track-height: var(--eds-sp-xs); }\n\n// COLOR VARIANTS\n:host([color=\"primary\"])  { --_eds-progress-bar-fill: var(--eds-c-surface-primary); }\n:host([color=\"success\"])  { --_eds-progress-bar-fill: var(--eds-c-surface-success); }\n:host([color=\"warning\"])  { --_eds-progress-bar-fill: var(--eds-c-surface-warning); }\n:host([color=\"critical\"]) { --_eds-progress-bar-fill: var(--eds-c-surface-critical); }\n\n// INDETERMINATE ANIMATION\n:host([indeterminate]) {\n    .eds-progress-bar__indicator {\n        width: 100% !important;\n        background-color: transparent;\n        background-image: linear-gradient(\n            to right,\n            transparent 0%,\n            var(--_eds-progress-bar-fill) 30%,\n            var(--_eds-progress-bar-fill) 60%,\n            transparent 100%\n        );\n        background-size: 40% 100%;\n        background-repeat: no-repeat;\n        animation: eds-progress-indeterminate 1.5s infinite ease-in-out;\n    }\n}\n\n@keyframes eds-progress-indeterminate {\n    0%   { background-position: -40% 0; }\n    100% { background-position: 140% 0; }\n}\n",
                     "styleUrl": "./eds-progress-bar.scss"
                 }
             ],
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 689,
-                    "end": 1244,
+                    "pos": 745,
+                    "end": 1292,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
                     "modifierFlagsCache": 0,
                     "transformFlags": 0,
-                    "comment": "Horizontal progress indicator component that visualizes task completion or loading states.\nSupports determinate progress with percentage values and indeterminate loading animations.\nProvides optional labeling and status icons for contextual feedback.\n\nSemantic color variants (`info`, `success`, `warning`, `critical`) are set via the `color`\nstring input and size variants (`xs`, `s`, `m`, `l`) via the `size` string input, both\nreflected onto the host as attributes and styled with `:host([color=\"…\"])` / `:host([size=\"…\"])`."
+                    "comment": "Horizontal progress indicator component that visualizes task completion or loading states.\nSupports determinate progress with percentage values and indeterminate loading animations.\nProvides optional labeling and status icons for contextual feedback.\n\nSemantic color variants (`primary`, `success`, `warning`, `critical`) are set via the `color`\nstring input and size variants (`m`, `l`) via the `size` string input, both\nreflected onto the host as attributes and styled with `:host([color=\"…\"])` / `:host([size=\"…\"])`."
                 }
             ],
             "extends": [],
@@ -62114,7 +62131,7 @@
                     }
                 ]
             },
-            "templateData": "@if (label() || hasStatusIcon()) {\n    <div class=\"eds-progress-bar__header\">\n        @if (label()) {\n            <span class=\"eds-progress-bar__header-label\">{{ label() }}</span>\n        }\n        @if (hasStatusIcon()) {\n            <span class=\"eds-progress-bar__header-status\">\n                <eds-icon-state [color]=\"color() || 'info'\" size=\"s\"/>\n            </span>\n        }\n    </div>\n}\n<div class=\"eds-progress-bar__track\">\n    <div class=\"eds-progress-bar__indicator\" [style.width]=\"!isIndeterminate() ? progress() + '%' : null\"></div>\n</div>\n"
+            "templateData": "@if (label() || hasStatusIcon()) {\n    <div class=\"eds-progress-bar__header\">\n        @if (label()) {\n            <span class=\"eds-progress-bar__header-label\">{{ label() }}</span>\n        }\n        @if (hasStatusIcon()) {\n            <span class=\"eds-progress-bar__header-status\">\n                <eds-icon-state [color]=\"statusIconColor()\" size=\"s\"/>\n            </span>\n        }\n    </div>\n}\n<div class=\"eds-progress-bar__track\">\n    <div class=\"eds-progress-bar__indicator\" [style.width]=\"!isIndeterminate() ? progress() + '%' : null\"></div>\n</div>\n"
         },
         {
             "name": "EdsProgressCircle",
@@ -70435,7 +70452,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n:host {\n    --_eds-switch-width: 2.75rem;\n    --_eds-switch-height: 1.5rem;\n    --_eds-switch-handle-size: 1.25rem;\n    --_eds-switch-handle-offset: 0.125rem;\n    --_eds-switch-track-color: var(--eds-c-surface-neutral-subtle);\n    --_eds-switch-track-color-checked: var(--eds-c-surface-primary);\n    --_eds-switch-handle-color: var(--eds-c-surface-elevation);\n    --_eds-switch-handle-border-color: var(--eds-c-border-neutral);\n    --_eds-switch-icon-color: var(--eds-c-foreground-subtler);\n\n    display: inline-flex;\n    align-items: center;\n    position: relative;\n    cursor: pointer;\n\n    .eds-switch__track {\n        display: flex;\n        align-items: center;\n        width: var(--_eds-switch-width);\n        height: var(--_eds-switch-height);\n        background-color: var(--_eds-switch-track-color);\n        border-radius: var(--eds-br-full);\n        padding: var(--_eds-switch-handle-offset);\n        transition: background-color 150ms ease-in-out;\n    }\n\n    .eds-switch__handle {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: var(--_eds-switch-handle-size);\n        height: var(--_eds-switch-handle-size);\n        background-color: var(--_eds-switch-handle-color);\n        border: 1px solid var(--_eds-switch-handle-border-color);\n        border-radius: var(--eds-br-full);\n        box-shadow: var(--eds-sh-1);\n        transition: transform 150ms ease-in-out;\n        color: var(--_eds-switch-icon-color);\n    }\n}\n\n:host(:focus-visible) {\n    @include base.eds-focus-visible-ring-rounded();\n}\n\n// CHECKED STATE\n:host([checked]) {\n    .eds-switch__track {\n        background-color: var(--_eds-switch-track-color-checked);\n    }\n\n    .eds-switch__handle {\n        transform: translateX(calc(var(--_eds-switch-width) - var(--_eds-switch-handle-size) - var(--_eds-switch-handle-offset) * 2));\n        border-color: var(--_eds-switch-track-color-checked);\n    }\n}\n\n// DISABLED STATE\n:host([disabled]) {\n    cursor: not-allowed;\n    opacity: 0.4;\n    pointer-events: none;\n}\n\n// SIZE VARIANTS\n:host([size=\"s\"]) {\n    --_eds-switch-width: 2.25rem;\n    --_eds-switch-height: 1.25rem;\n    --_eds-switch-handle-size: 1rem;\n    --_eds-switch-handle-offset: 0.125rem;\n}\n\n:host([size=\"l\"]) {\n    --_eds-switch-width: 3.25rem;\n    --_eds-switch-height: 1.75rem;\n    --_eds-switch-handle-size: 1.5rem;\n    --_eds-switch-handle-offset: 0.125rem;\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    --_eds-switch-width: 2.75rem;\n    --_eds-switch-height: 1.5rem;\n    --_eds-switch-handle-size: 1.25rem;\n    --_eds-switch-handle-offset: 0.125rem;\n    --_eds-switch-track-color: var(--eds-c-surface-neutral);\n    --_eds-switch-track-color-checked: var(--eds-c-surface-primary);\n    --_eds-switch-handle-color: var(--eds-c-surface-elevation);\n    --_eds-switch-handle-border-color: var(--eds-c-border-neutral);\n    --_eds-switch-icon-color: var(--eds-c-foreground-subtler);\n\n    display: inline-flex;\n    align-items: center;\n    position: relative;\n    cursor: pointer;\n\n    .eds-switch__track {\n        display: flex;\n        align-items: center;\n        width: var(--_eds-switch-width);\n        height: var(--_eds-switch-height);\n        background-color: var(--_eds-switch-track-color);\n        border-radius: var(--eds-br-full);\n        padding: var(--_eds-switch-handle-offset);\n        transition: background-color 150ms ease-in-out;\n    }\n\n    .eds-switch__handle {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: var(--_eds-switch-handle-size);\n        height: var(--_eds-switch-handle-size);\n        background-color: var(--_eds-switch-handle-color);\n        border: 1px solid var(--_eds-switch-handle-border-color);\n        border-radius: var(--eds-br-full);\n        box-shadow: var(--eds-sh-1);\n        transition: transform 150ms ease-in-out;\n        color: var(--_eds-switch-icon-color);\n    }\n}\n\n:host(:focus-visible) {\n    @include base.eds-focus-visible-ring-rounded();\n}\n\n// CHECKED STATE\n:host([checked]) {\n    .eds-switch__track {\n        background-color: var(--_eds-switch-track-color-checked);\n    }\n\n    .eds-switch__handle {\n        transform: translateX(calc(var(--_eds-switch-width) - var(--_eds-switch-handle-size) - var(--_eds-switch-handle-offset) * 2));\n        border-color: var(--_eds-switch-track-color-checked);\n    }\n}\n\n// DISABLED STATE\n:host([disabled]) {\n    cursor: not-allowed;\n    opacity: 0.4;\n    pointer-events: none;\n}\n\n// SIZE VARIANTS\n:host([size=\"s\"]) {\n    --_eds-switch-width: 2.25rem;\n    --_eds-switch-height: 1.25rem;\n    --_eds-switch-handle-size: 1rem;\n    --_eds-switch-handle-offset: 0.125rem;\n}\n\n:host([size=\"l\"]) {\n    --_eds-switch-width: 3.25rem;\n    --_eds-switch-height: 1.75rem;\n    --_eds-switch-handle-size: 1.5rem;\n    --_eds-switch-handle-offset: 0.125rem;\n}\n",
                     "styleUrl": "./eds-switch.scss"
                 }
             ],
@@ -70482,7 +70499,7 @@
                     }
                 ]
             },
-            "templateData": "<span class=\"eds-switch__track\">\n    <span class=\"eds-switch__handle\">\n        @if (iconOn() && iconOff()) {\n            @if (checked()) {\n                <eds-icon [icon]=\"iconOn()!\" size=\"s\"/>\n            } @else {\n                <eds-icon [icon]=\"iconOff()!\" size=\"s\"/>\n            }\n        }\n    </span>\n</span>\n"
+            "templateData": "<span class=\"eds-switch__track\">\n    <span class=\"eds-switch__handle\">\n        @if (iconOn() && iconOff()) {\n            @if (checked()) {\n                <eds-icon [icon]=\"iconOn()!\" size=\"2xs\"/>\n            } @else {\n                <eds-icon [icon]=\"iconOff()!\" size=\"2xs\"/>\n            }\n        }\n    </span>\n</span>\n"
         },
         {
             "name": "EdsTab",
@@ -86546,7 +86563,7 @@
                 "ctype": "miscellaneous",
                 "subtype": "typealias",
                 "coverageIgnore": false,
-                "rawtype": "\"info\" | \"success\" | \"warning\" | \"critical\"",
+                "rawtype": "\"primary\" | \"success\" | \"warning\" | \"critical\"",
                 "file": "packages/eds/eds-progress-bar/eds-progress-bar.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -86559,7 +86576,7 @@
                 "ctype": "miscellaneous",
                 "subtype": "typealias",
                 "coverageIgnore": false,
-                "rawtype": "\"xs\" | \"s\" | \"m\" | \"l\"",
+                "rawtype": "\"m\" | \"l\"",
                 "file": "packages/eds/eds-progress-bar/eds-progress-bar.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -92199,7 +92216,7 @@
                     "ctype": "miscellaneous",
                     "subtype": "typealias",
                     "coverageIgnore": false,
-                    "rawtype": "\"info\" | \"success\" | \"warning\" | \"critical\"",
+                    "rawtype": "\"primary\" | \"success\" | \"warning\" | \"critical\"",
                     "file": "packages/eds/eds-progress-bar/eds-progress-bar.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
@@ -92212,7 +92229,7 @@
                     "ctype": "miscellaneous",
                     "subtype": "typealias",
                     "coverageIgnore": false,
-                    "rawtype": "\"xs\" | \"s\" | \"m\" | \"l\"",
+                    "rawtype": "\"m\" | \"l\"",
                     "file": "packages/eds/eds-progress-bar/eds-progress-bar.ts",
                     "deprecated": false,
                     "deprecationMessage": "",

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-10-01T14:13:12.611Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-10-01T18:43:30.099Z, llm-md export.
 
 ## Components
 
@@ -2675,7 +2675,7 @@ File: `packages/eds/eds-progress-bar/eds-progress-bar.ts`
 Selector: `eds-progress-bar`
 Change detection: `ChangeDetectionStrategy.OnPush`
 
-Description: Horizontal progress indicator component that visualizes task completion or loading states. Supports determinate progress with percentage values and indeterminate loading animations. Provides optional labeling and status icons for contextual feedback. Semantic color variants ( info , success , warning , critical ) are set via the color string input and size variants ( xs , s , m , l ) via the size string input, both reflected onto the host as attributes and styled with :host(\[color="…"\]) / :host(\[size="…"\]) .
+Description: Horizontal progress indicator component that visualizes task completion or loading states. Supports determinate progress with percentage values and indeterminate loading animations. Provides optional labeling and status icons for contextual feedback. Semantic color variants ( primary , success , warning , critical ) are set via the color string input and size variants ( m , l ) via the size string input, both reflected onto the host as attributes and styled with :host(\[color="…"\]) / :host(\[size="…"\]) .
 
 Inputs:
 - `ariaLabel: string = ''` — Explicit accessible name for the progress bar. Use when there is no visible label (e.g. the bar sits in a table cell or under a custom header). Defaults to the visible label when set, otherwise a generic 'Progress' so the progressbar always has a name (WCAG 1.1.1). Provide a specific value for context.
@@ -2685,7 +2685,7 @@ Inputs:
 - `isIndeterminate: boolean = false` — When true, shows an indeterminate progress animation instead of a specific progress value. false
 - `label: string = ''` — Optional label displayed above the progress bar. Also used as the accessible name.
 - `progress: number = 0` — Current progress value (0–100). Values outside the range are clamped automatically. 0
-- `size: EdsProgressBarSize = 's'` — Size variant, reflected as the size host attribute. 's'
+- `size: EdsProgressBarSize = 'm'` — Size variant, reflected as the size host attribute. 'm'
 - `valueText: string = ''` — Human-readable text alternative for the current value. Use when the numeric percentage alone isn't meaningful (e.g. "Step 3 of 5", "Uploading file 2 of 10"). Maps to aria-valuetext.
 
 ### EdsProgressCircle
@@ -5731,8 +5731,8 @@ Properties:
 - `type EdsOverlayPosition = "right" | "left" | "top" | "bottom"`
 - `type EdsPopoverPosition = "top" | "right" | "bottom" | "left"` — Represents the four possible positions for a popover element.
 - `type EdsPopoverSize = "s" | "m" | "l" | "xl" | "2xl" | "auto"` — Local narrowed size union — the popover's size contract (String-Props model).
-- `type EdsProgressBarColor = "info" | "success" | "warning" | "critical"` — Local narrowed color union — the progress-bar variant contract (String-Props model).
-- `type EdsProgressBarSize = "xs" | "s" | "m" | "l"` — Local narrowed size union — the progress-bar variant contract (String-Props model).
+- `type EdsProgressBarColor = "primary" | "success" | "warning" | "critical"` — Local narrowed color union — the progress-bar variant contract (String-Props model).
+- `type EdsProgressBarSize = "m" | "l"` — Local narrowed size union — the progress-bar variant contract (String-Props model).
 - `type EdsProgressCircleColorType = "info" | "success" | "warning" | "critical"` — Supported color types for automatic color step transitions.
 - `type EdsResizablePosition = "left" | "right"` — Handle placement side.
 - `type EdsSegmentedControlSize = "s" | "m" | "l"` — Sizes the segmented control styles (SCSS :host(\[size="…"\]) branches).

package/docs/miscellaneous/typealiases.html

@@ -1993,7 +1993,7 @@ Each value maps to a specific status icon.</p>
             </tr>
             <tr>
                 <td class="col-md-4">
-                    <code>    <code>&quot;info&quot; | &quot;success&quot; | &quot;warning&quot; | &quot;critical&quot;</code>
+                    <code>    <code>&quot;primary&quot; | &quot;success&quot; | &quot;warning&quot; | &quot;critical&quot;</code>
 </code>
                 </td>
             </tr>
@@ -2015,7 +2015,7 @@ Each value maps to a specific status icon.</p>
             </tr>
             <tr>
                 <td class="col-md-4">
-                    <code>    <code>&quot;xs&quot; | &quot;s&quot; | &quot;m&quot; | &quot;l&quot;</code>
+                    <code>    <code>&quot;m&quot; | &quot;l&quot;</code>
 </code>
                 </td>
             </tr>

package/docs/properties.html

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

package/fesm2022/eui-eds-eds-progress-bar.mjs

@@ -10,8 +10,8 @@ const progressTransform = (value) => Math.max(0, Math.min(numberAttribute(value,
  * Supports determinate progress with percentage values and indeterminate loading animations.
  * Provides optional labeling and status icons for contextual feedback.
  *
- * Semantic color variants (`info`, `success`, `warning`, `critical`) are set via the `color`
- * string input and size variants (`xs`, `s`, `m`, `l`) via the `size` string input, both
+ * Semantic color variants (`primary`, `success`, `warning`, `critical`) are set via the `color`
+ * string input and size variants (`m`, `l`) via the `size` string input, both
  * reflected onto the host as attributes and styled with `:host([color="…"])` / `:host([size="…"])`.
  */
 class EdsProgressBar {
@@ -55,9 +55,9 @@ class EdsProgressBar {
         ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         /**
          * Size variant, reflected as the `size` host attribute.
-         * @default 's'
+         * @default 'm'
          */
-        this.size = input('s', /* @ts-ignore */
+        this.size = input('m', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /**
          * When true, shows an indeterminate progress animation
@@ -77,9 +77,19 @@ class EdsProgressBar {
          */
         this.resolvedAriaLabel = computed(() => this.ariaLabel() || this.label() || 'Progress', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Status-icon color. The icon-state contract has no `primary` variant, so `primary` (and the
+         * unset/default primary state) map to the neutral `info` status icon; the semantic colors pass
+         * through unchanged.
+         */
+        this.statusIconColor = computed(() => {
+            const color = this.color();
+            return color && color !== 'primary' ? color : 'info';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "statusIconColor" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsProgressBar, isStandalone: true, selector: "eds-progress-bar", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isIndeterminate: { classPropertyName: "isIndeterminate", publicName: "isIndeterminate", isSignal: true, isRequired: false, transformFunction: null }, hasStatusIcon: { classPropertyName: "hasStatusIcon", publicName: "hasStatusIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.color": "color() || null", "attr.size": "size()", "attr.indeterminate": "isIndeterminate() || null", "attr.has-status-icon": "hasStatusIcon() || null", "attr.data-e2e": "e2eAttr()", "attr.aria-valuenow": "!isIndeterminate() ? progress() : null", "attr.aria-valuemin": "\"0\"", "attr.aria-valuemax": "\"100\"", "attr.aria-label": "resolvedAriaLabel()", "attr.aria-valuetext": "valueText() || null" }, classAttribute: "eds-progress-bar" }, ngImport: i0, template: "@if (label() || hasStatusIcon()) {\n    <div class=\"eds-progress-bar__header\">\n        @if (label()) {\n            <span class=\"eds-progress-bar__header-label\">{{ label() }}</span>\n        }\n        @if (hasStatusIcon()) {\n            <span class=\"eds-progress-bar__header-status\">\n                <eds-icon-state [color]=\"color() || 'info'\" size=\"s\"/>\n            </span>\n        }\n    </div>\n}\n<div class=\"eds-progress-bar__track\">\n    <div class=\"eds-progress-bar__indicator\" [style.width]=\"!isIndeterminate() ? progress() + '%' : null\"></div>\n</div>\n", styles: [":host{--_eds-progress-bar-track-height: var(--eds-sp-2xs);--_eds-progress-bar-fill: var(--eds-c-surface-primary);display:flex;flex-direction:column;align-items:stretch;position:relative;width:100%}:host .eds-progress-bar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}:host .eds-progress-bar__header-label{font:var(--eds-f-label-s);color:var(--eds-c-foreground)}:host .eds-progress-bar__header-status{display:flex;align-items:center}:host .eds-progress-bar__track{background-color:var(--eds-c-surface-elevation-sunken);border-radius:var(--eds-br-xs);height:var(--_eds-progress-bar-track-height);position:relative;overflow:hidden;width:100%}:host .eds-progress-bar__indicator{background-color:var(--_eds-progress-bar-fill);border-radius:var(--eds-br-xs);height:100%;transition:width .25s ease}:host([size=xs]){--_eds-progress-bar-track-height: var(--eds-sp-3xs)}:host([size=s]){--_eds-progress-bar-track-height: var(--eds-sp-2xs)}:host([size=m]){--_eds-progress-bar-track-height: var(--eds-sp-xs)}:host([size=l]){--_eds-progress-bar-track-height: var(--eds-sp-s)}:host([color=info]){--_eds-progress-bar-fill: var(--eds-c-surface-info)}:host([color=success]){--_eds-progress-bar-fill: var(--eds-c-surface-success)}:host([color=warning]){--_eds-progress-bar-fill: var(--eds-c-surface-warning)}:host([color=critical]){--_eds-progress-bar-fill: var(--eds-c-surface-critical)}:host([indeterminate]) .eds-progress-bar__indicator{width:100%!important;background-color:transparent;background-image:linear-gradient(to right,transparent 0%,var(--_eds-progress-bar-fill) 30%,var(--_eds-progress-bar-fill) 60%,transparent 100%);background-size:40% 100%;background-repeat:no-repeat;animation:eds-progress-indeterminate 1.5s infinite ease-in-out}@keyframes eds-progress-indeterminate{0%{background-position:-40% 0}to{background-position:140% 0}}\n"], dependencies: [{ kind: "component", type: i1.EdsIconState, selector: "eds-icon-state", inputs: ["color", "size", "ariaLabel", "e2eAttr"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsProgressBar, isStandalone: true, selector: "eds-progress-bar", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isIndeterminate: { classPropertyName: "isIndeterminate", publicName: "isIndeterminate", isSignal: true, isRequired: false, transformFunction: null }, hasStatusIcon: { classPropertyName: "hasStatusIcon", publicName: "hasStatusIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.color": "color() || null", "attr.size": "size()", "attr.indeterminate": "isIndeterminate() || null", "attr.has-status-icon": "hasStatusIcon() || null", "attr.data-e2e": "e2eAttr()", "attr.aria-valuenow": "!isIndeterminate() ? progress() : null", "attr.aria-valuemin": "\"0\"", "attr.aria-valuemax": "\"100\"", "attr.aria-label": "resolvedAriaLabel()", "attr.aria-valuetext": "valueText() || null" }, classAttribute: "eds-progress-bar" }, ngImport: i0, template: "@if (label() || hasStatusIcon()) {\n    <div class=\"eds-progress-bar__header\">\n        @if (label()) {\n            <span class=\"eds-progress-bar__header-label\">{{ label() }}</span>\n        }\n        @if (hasStatusIcon()) {\n            <span class=\"eds-progress-bar__header-status\">\n                <eds-icon-state [color]=\"statusIconColor()\" size=\"s\"/>\n            </span>\n        }\n    </div>\n}\n<div class=\"eds-progress-bar__track\">\n    <div class=\"eds-progress-bar__indicator\" [style.width]=\"!isIndeterminate() ? progress() + '%' : null\"></div>\n</div>\n", styles: [":host{--_eds-progress-bar-track-height: var(--eds-sp-3xs);--_eds-progress-bar-fill: var(--eds-c-surface-primary);display:flex;flex-direction:column;align-items:stretch;position:relative;width:100%}:host .eds-progress-bar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}:host .eds-progress-bar__header-label{font:var(--eds-f-label-s);color:var(--eds-c-foreground)}:host .eds-progress-bar__header-status{display:flex;align-items:center}:host .eds-progress-bar__track{background-color:var(--eds-c-surface-elevation-sunken);border-radius:var(--eds-br-xs);height:var(--_eds-progress-bar-track-height);position:relative;overflow:hidden;width:100%}:host .eds-progress-bar__indicator{background-color:var(--_eds-progress-bar-fill);border-radius:var(--eds-br-xs);height:100%;transition:width .25s ease}:host([size=m]){--_eds-progress-bar-track-height: var(--eds-sp-2xs)}:host([size=l]){--_eds-progress-bar-track-height: var(--eds-sp-xs)}:host([color=primary]){--_eds-progress-bar-fill: var(--eds-c-surface-primary)}:host([color=success]){--_eds-progress-bar-fill: var(--eds-c-surface-success)}:host([color=warning]){--_eds-progress-bar-fill: var(--eds-c-surface-warning)}:host([color=critical]){--_eds-progress-bar-fill: var(--eds-c-surface-critical)}:host([indeterminate]) .eds-progress-bar__indicator{width:100%!important;background-color:transparent;background-image:linear-gradient(to right,transparent 0%,var(--_eds-progress-bar-fill) 30%,var(--_eds-progress-bar-fill) 60%,transparent 100%);background-size:40% 100%;background-repeat:no-repeat;animation:eds-progress-indeterminate 1.5s infinite ease-in-out}@keyframes eds-progress-indeterminate{0%{background-position:-40% 0}to{background-position:140% 0}}\n"], dependencies: [{ kind: "component", type: i1.EdsIconState, selector: "eds-icon-state", inputs: ["color", "size", "ariaLabel", "e2eAttr"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsProgressBar, decorators: [{
             type: Component,
@@ -96,7 +106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '[attr.aria-valuemax]': '"100"',
                         '[attr.aria-label]': 'resolvedAriaLabel()',
                         '[attr.aria-valuetext]': 'valueText() || null',
-                    }, template: "@if (label() || hasStatusIcon()) {\n    <div class=\"eds-progress-bar__header\">\n        @if (label()) {\n            <span class=\"eds-progress-bar__header-label\">{{ label() }}</span>\n        }\n        @if (hasStatusIcon()) {\n            <span class=\"eds-progress-bar__header-status\">\n                <eds-icon-state [color]=\"color() || 'info'\" size=\"s\"/>\n            </span>\n        }\n    </div>\n}\n<div class=\"eds-progress-bar__track\">\n    <div class=\"eds-progress-bar__indicator\" [style.width]=\"!isIndeterminate() ? progress() + '%' : null\"></div>\n</div>\n", styles: [":host{--_eds-progress-bar-track-height: var(--eds-sp-2xs);--_eds-progress-bar-fill: var(--eds-c-surface-primary);display:flex;flex-direction:column;align-items:stretch;position:relative;width:100%}:host .eds-progress-bar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}:host .eds-progress-bar__header-label{font:var(--eds-f-label-s);color:var(--eds-c-foreground)}:host .eds-progress-bar__header-status{display:flex;align-items:center}:host .eds-progress-bar__track{background-color:var(--eds-c-surface-elevation-sunken);border-radius:var(--eds-br-xs);height:var(--_eds-progress-bar-track-height);position:relative;overflow:hidden;width:100%}:host .eds-progress-bar__indicator{background-color:var(--_eds-progress-bar-fill);border-radius:var(--eds-br-xs);height:100%;transition:width .25s ease}:host([size=xs]){--_eds-progress-bar-track-height: var(--eds-sp-3xs)}:host([size=s]){--_eds-progress-bar-track-height: var(--eds-sp-2xs)}:host([size=m]){--_eds-progress-bar-track-height: var(--eds-sp-xs)}:host([size=l]){--_eds-progress-bar-track-height: var(--eds-sp-s)}:host([color=info]){--_eds-progress-bar-fill: var(--eds-c-surface-info)}:host([color=success]){--_eds-progress-bar-fill: var(--eds-c-surface-success)}:host([color=warning]){--_eds-progress-bar-fill: var(--eds-c-surface-warning)}:host([color=critical]){--_eds-progress-bar-fill: var(--eds-c-surface-critical)}:host([indeterminate]) .eds-progress-bar__indicator{width:100%!important;background-color:transparent;background-image:linear-gradient(to right,transparent 0%,var(--_eds-progress-bar-fill) 30%,var(--_eds-progress-bar-fill) 60%,transparent 100%);background-size:40% 100%;background-repeat:no-repeat;animation:eds-progress-indeterminate 1.5s infinite ease-in-out}@keyframes eds-progress-indeterminate{0%{background-position:-40% 0}to{background-position:140% 0}}\n"] }]
+                    }, template: "@if (label() || hasStatusIcon()) {\n    <div class=\"eds-progress-bar__header\">\n        @if (label()) {\n            <span class=\"eds-progress-bar__header-label\">{{ label() }}</span>\n        }\n        @if (hasStatusIcon()) {\n            <span class=\"eds-progress-bar__header-status\">\n                <eds-icon-state [color]=\"statusIconColor()\" size=\"s\"/>\n            </span>\n        }\n    </div>\n}\n<div class=\"eds-progress-bar__track\">\n    <div class=\"eds-progress-bar__indicator\" [style.width]=\"!isIndeterminate() ? progress() + '%' : null\"></div>\n</div>\n", styles: [":host{--_eds-progress-bar-track-height: var(--eds-sp-3xs);--_eds-progress-bar-fill: var(--eds-c-surface-primary);display:flex;flex-direction:column;align-items:stretch;position:relative;width:100%}:host .eds-progress-bar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}:host .eds-progress-bar__header-label{font:var(--eds-f-label-s);color:var(--eds-c-foreground)}:host .eds-progress-bar__header-status{display:flex;align-items:center}:host .eds-progress-bar__track{background-color:var(--eds-c-surface-elevation-sunken);border-radius:var(--eds-br-xs);height:var(--_eds-progress-bar-track-height);position:relative;overflow:hidden;width:100%}:host .eds-progress-bar__indicator{background-color:var(--_eds-progress-bar-fill);border-radius:var(--eds-br-xs);height:100%;transition:width .25s ease}:host([size=m]){--_eds-progress-bar-track-height: var(--eds-sp-2xs)}:host([size=l]){--_eds-progress-bar-track-height: var(--eds-sp-xs)}:host([color=primary]){--_eds-progress-bar-fill: var(--eds-c-surface-primary)}:host([color=success]){--_eds-progress-bar-fill: var(--eds-c-surface-success)}:host([color=warning]){--_eds-progress-bar-fill: var(--eds-c-surface-warning)}:host([color=critical]){--_eds-progress-bar-fill: var(--eds-c-surface-critical)}:host([indeterminate]) .eds-progress-bar__indicator{width:100%!important;background-color:transparent;background-image:linear-gradient(to right,transparent 0%,var(--_eds-progress-bar-fill) 30%,var(--_eds-progress-bar-fill) 60%,transparent 100%);background-size:40% 100%;background-repeat:no-repeat;animation:eds-progress-indeterminate 1.5s infinite ease-in-out}@keyframes eds-progress-indeterminate{0%{background-position:-40% 0}to{background-position:140% 0}}\n"] }]
         }], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isIndeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIndeterminate", required: false }] }], hasStatusIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasStatusIcon", required: false }] }] } });
 
 /** Convenience array for importing all eds-progress-bar components. */

package/fesm2022/eui-eds-eds-progress-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-eds-eds-progress-bar.mjs","sources":["../../eds-progress-bar/eds-progress-bar.ts","../../eds-progress-bar/eds-progress-bar.html","../../eds-progress-bar/index.ts","../../eds-progress-bar/eui-eds-eds-progress-bar.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    computed,\n    input,\n    booleanAttribute,\n    numberAttribute,\n} from '@angular/core';\nimport { EDS_ICON_STATE } from '@eui/eds/eds-icon-state';\n\n/** Transform that clamps progress to 0–100 range. */\nconst progressTransform = (value: unknown): number => Math.max(0, Math.min(numberAttribute(value, 0), 100));\n\n/** Local narrowed color union — the progress-bar variant contract (String-Props model). */\nexport type EdsProgressBarColor = 'info' | 'success' | 'warning' | 'critical';\n\n/** Local narrowed size union — the progress-bar variant contract (String-Props model). */\nexport type EdsProgressBarSize = 'xs' | 's' | 'm' | 'l';\n\n/**\n * Horizontal progress indicator component that visualizes task completion or loading states.\n * Supports determinate progress with percentage values and indeterminate loading animations.\n * Provides optional labeling and status icons for contextual feedback.\n *\n * Semantic color variants (`info`, `success`, `warning`, `critical`) are set via the `color`\n * string input and size variants (`xs`, `s`, `m`, `l`) via the `size` string input, both\n * reflected onto the host as attributes and styled with `:host([color=\"…\"])` / `:host([size=\"…\"])`.\n */\n@Component({\n    selector: 'eds-progress-bar',\n    templateUrl: './eds-progress-bar.html',\n    styleUrl: './eds-progress-bar.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [...EDS_ICON_STATE],\n    host: {\n        class: 'eds-progress-bar',\n        role: 'progressbar',\n        '[attr.color]': 'color() || null',\n        '[attr.size]': 'size()',\n        '[attr.indeterminate]': 'isIndeterminate() || null',\n        '[attr.has-status-icon]': 'hasStatusIcon() || null',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '[attr.aria-valuenow]': '!isIndeterminate() ? progress() : null',\n        '[attr.aria-valuemin]': '\"0\"',\n        '[attr.aria-valuemax]': '\"100\"',\n        '[attr.aria-label]': 'resolvedAriaLabel()',\n        '[attr.aria-valuetext]': 'valueText() || null',\n    },\n})\nexport class EdsProgressBar {\n    /**\n     * Data attribute value for end-to-end testing identification.\n     * @default 'eds-progress-bar'\n     */\n    e2eAttr = input('eds-progress-bar');\n\n    /** Optional label displayed above the progress bar. Also used as the accessible name. */\n    label = input('');\n\n    /**\n     * Explicit accessible name for the progress bar. Use when there is no visible `label`\n     * (e.g. the bar sits in a table cell or under a custom header). Defaults to the visible\n     * `label` when set, otherwise a generic `'Progress'` so the progressbar always has a name\n     * (WCAG 1.1.1). Provide a specific value for context.\n     */\n    ariaLabel = input<string>('');\n\n    /**\n     * Human-readable text alternative for the current value.\n     * Use when the numeric percentage alone isn't meaningful\n     * (e.g. \"Step 3 of 5\", \"Uploading file 2 of 10\").\n     * Maps to aria-valuetext.\n     */\n    valueText = input('');\n\n    /**\n     * Current progress value (0–100).\n     * Values outside the range are clamped automatically.\n     * @default 0\n     */\n    progress = input(0, { transform: progressTransform });\n\n    /**\n     * Semantic color variant, reflected as the `color` host attribute.\n     * When unset, the default primary fill is used.\n     */\n    color = input<EdsProgressBarColor | null>(null);\n\n    /**\n     * Size variant, reflected as the `size` host attribute.\n     * @default 's'\n     */\n    size = input<EdsProgressBarSize>('s');\n\n    /**\n     * When true, shows an indeterminate progress animation\n     * instead of a specific progress value.\n     * @default false\n     */\n    isIndeterminate = input(false, { transform: booleanAttribute });\n\n    /**\n     * When true, displays a status icon based on the current color variant\n     * (success, warning, critical, info).\n     * @default false\n     */\n    hasStatusIcon = input(false, { transform: booleanAttribute });\n\n    /**\n     * Resolved accessible name for the host: an explicit `ariaLabel`, otherwise the visible\n     * `label`, otherwise a generic `'Progress'` fallback so the progressbar always has a name.\n     */\n    protected readonly resolvedAriaLabel = computed(() => this.ariaLabel() || this.label() || 'Progress');\n}\n","@if (label() || hasStatusIcon()) {\n    <div class=\"eds-progress-bar__header\">\n        @if (label()) {\n            <span class=\"eds-progress-bar__header-label\">{{ label() }}</span>\n        }\n        @if (hasStatusIcon()) {\n            <span class=\"eds-progress-bar__header-status\">\n                <eds-icon-state [color]=\"color() || 'info'\" size=\"s\"/>\n            </span>\n        }\n    </div>\n}\n<div class=\"eds-progress-bar__track\">\n    <div class=\"eds-progress-bar__indicator\" [style.width]=\"!isIndeterminate() ? progress() + '%' : null\"></div>\n</div>\n","import { EdsProgressBar } from './eds-progress-bar';\n\nexport { EdsProgressBar };\n\n/** Convenience array for importing all eds-progress-bar components. */\nexport const EDS_PROGRESS_BAR = [\n    EdsProgressBar,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-eds-eds-progress-bar.mjs","sources":["../../eds-progress-bar/eds-progress-bar.ts","../../eds-progress-bar/eds-progress-bar.html","../../eds-progress-bar/index.ts","../../eds-progress-bar/eui-eds-eds-progress-bar.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    computed,\n    input,\n    booleanAttribute,\n    numberAttribute,\n} from '@angular/core';\nimport { EDS_ICON_STATE } from '@eui/eds/eds-icon-state';\nimport type { EdsIconStateColor } from '@eui/eds/eds-icon-state';\n\n/** Transform that clamps progress to 0–100 range. */\nconst progressTransform = (value: unknown): number => Math.max(0, Math.min(numberAttribute(value, 0), 100));\n\n/** Local narrowed color union — the progress-bar variant contract (String-Props model). */\nexport type EdsProgressBarColor = 'primary' | 'success' | 'warning' | 'critical';\n\n/** Local narrowed size union — the progress-bar variant contract (String-Props model). */\nexport type EdsProgressBarSize = 'm' | 'l';\n\n/**\n * Horizontal progress indicator component that visualizes task completion or loading states.\n * Supports determinate progress with percentage values and indeterminate loading animations.\n * Provides optional labeling and status icons for contextual feedback.\n *\n * Semantic color variants (`primary`, `success`, `warning`, `critical`) are set via the `color`\n * string input and size variants (`m`, `l`) via the `size` string input, both\n * reflected onto the host as attributes and styled with `:host([color=\"…\"])` / `:host([size=\"…\"])`.\n */\n@Component({\n    selector: 'eds-progress-bar',\n    templateUrl: './eds-progress-bar.html',\n    styleUrl: './eds-progress-bar.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [...EDS_ICON_STATE],\n    host: {\n        class: 'eds-progress-bar',\n        role: 'progressbar',\n        '[attr.color]': 'color() || null',\n        '[attr.size]': 'size()',\n        '[attr.indeterminate]': 'isIndeterminate() || null',\n        '[attr.has-status-icon]': 'hasStatusIcon() || null',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '[attr.aria-valuenow]': '!isIndeterminate() ? progress() : null',\n        '[attr.aria-valuemin]': '\"0\"',\n        '[attr.aria-valuemax]': '\"100\"',\n        '[attr.aria-label]': 'resolvedAriaLabel()',\n        '[attr.aria-valuetext]': 'valueText() || null',\n    },\n})\nexport class EdsProgressBar {\n    /**\n     * Data attribute value for end-to-end testing identification.\n     * @default 'eds-progress-bar'\n     */\n    e2eAttr = input('eds-progress-bar');\n\n    /** Optional label displayed above the progress bar. Also used as the accessible name. */\n    label = input('');\n\n    /**\n     * Explicit accessible name for the progress bar. Use when there is no visible `label`\n     * (e.g. the bar sits in a table cell or under a custom header). Defaults to the visible\n     * `label` when set, otherwise a generic `'Progress'` so the progressbar always has a name\n     * (WCAG 1.1.1). Provide a specific value for context.\n     */\n    ariaLabel = input<string>('');\n\n    /**\n     * Human-readable text alternative for the current value.\n     * Use when the numeric percentage alone isn't meaningful\n     * (e.g. \"Step 3 of 5\", \"Uploading file 2 of 10\").\n     * Maps to aria-valuetext.\n     */\n    valueText = input('');\n\n    /**\n     * Current progress value (0–100).\n     * Values outside the range are clamped automatically.\n     * @default 0\n     */\n    progress = input(0, { transform: progressTransform });\n\n    /**\n     * Semantic color variant, reflected as the `color` host attribute.\n     * When unset, the default primary fill is used.\n     */\n    color = input<EdsProgressBarColor | null>(null);\n\n    /**\n     * Size variant, reflected as the `size` host attribute.\n     * @default 'm'\n     */\n    size = input<EdsProgressBarSize>('m');\n\n    /**\n     * When true, shows an indeterminate progress animation\n     * instead of a specific progress value.\n     * @default false\n     */\n    isIndeterminate = input(false, { transform: booleanAttribute });\n\n    /**\n     * When true, displays a status icon based on the current color variant\n     * (success, warning, critical, info).\n     * @default false\n     */\n    hasStatusIcon = input(false, { transform: booleanAttribute });\n\n    /**\n     * Resolved accessible name for the host: an explicit `ariaLabel`, otherwise the visible\n     * `label`, otherwise a generic `'Progress'` fallback so the progressbar always has a name.\n     */\n    protected readonly resolvedAriaLabel = computed(() => this.ariaLabel() || this.label() || 'Progress');\n\n    /**\n     * Status-icon color. The icon-state contract has no `primary` variant, so `primary` (and the\n     * unset/default primary state) map to the neutral `info` status icon; the semantic colors pass\n     * through unchanged.\n     */\n    protected readonly statusIconColor = computed<EdsIconStateColor>(() => {\n        const color = this.color();\n        return color && color !== 'primary' ? color : 'info';\n    });\n}\n","@if (label() || hasStatusIcon()) {\n    <div class=\"eds-progress-bar__header\">\n        @if (label()) {\n            <span class=\"eds-progress-bar__header-label\">{{ label() }}</span>\n        }\n        @if (hasStatusIcon()) {\n            <span class=\"eds-progress-bar__header-status\">\n                <eds-icon-state [color]=\"statusIconColor()\" size=\"s\"/>\n            </span>\n        }\n    </div>\n}\n<div class=\"eds-progress-bar__track\">\n    <div class=\"eds-progress-bar__indicator\" [style.width]=\"!isIndeterminate() ? progress() + '%' : null\"></div>\n</div>\n","import { EdsProgressBar } from './eds-progress-bar';\n\nexport { EdsProgressBar };\nexport type { EdsProgressBarColor, EdsProgressBarSize } from './eds-progress-bar';\n\n/** Convenience array for importing all eds-progress-bar components. */\nexport const EDS_PROGRESS_BAR = [\n    EdsProgressBar,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}