@eui/eds 22.0.0-alpha.43 → 22.0.0-alpha.44

package/docs/json/EdsInputButton.md

@@ -24,9 +24,20 @@ commonly used for search inputs, password visibility toggles, or clear actions.
 </eds-input-button>
 ```
 
+### Focus model (roving tabindex)
+- `Tab` moves focus directly onto the input field (the primary control); the
+  focus ring covers the whole host (the group). `Tab` again leaves the group.
+- `ArrowLeft` / `ArrowRight` rove focus between the group's controls in visual
+  order — the input, the clearable "✕" icon (when present), and the button —
+  wrapping at the ends; `Home` / `End` jump to the first / last control.
+- Only the active control is in the tab order, so `Tab` leaves the group from
+  wherever focus currently is. Focusing a child directly (click) adopts it as
+  the active roving target.
+
 ### Accessibility
-- Button and input maintain separate focus states
-- Ensure button has descriptive label or aria-label
+- Single tab stop with arrow-key navigation between the controls
+- The clearable icon participates in the arrow-key cycle when it is shown
+- Ensure button has a descriptive label or aria-label
 - Tab order follows visual layout
 
 ### Notes

package/docs/json/documentation.json

@@ -26515,7 +26515,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n:host {\n    // surface channels consumed by projected sub-components (icon/text)\n    --_surface: var(--eds-c-surface-neutral-subtler);\n    --_on-surface: var(--eds-c-on-surface-neutral-subtler);\n\n    // default size = m\n    --_size: var(--eds-si-4xl);\n    --_icon-size: var(--eds-is-m);\n    --_font-size: var(--eds-f-s-xl);\n\n    display: inline-flex;\n    position: relative;\n    align-items: center;\n    gap: var(--eds-sp-s);\n    border-radius: var(--eds-br-full);\n\n    .eds-avatar-wrapper {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: var(--eds-br-full);\n        background-color: var(--_surface);\n        color: var(--_on-surface);\n        height: var(--_size);\n        width: var(--_size);\n        position: relative;\n    }\n}\n\n// SIZE VARIANTS\n// -------------\n\n:host([size=\"2xs\"]) {\n    --_size: var(--eds-si-m);\n    --_icon-size: var(--eds-is-2xs);\n    --_font-size: var(--eds-f-s-xs);\n}\n:host([size=\"xs\"]) {\n    --_size: var(--eds-si-xl);\n    --_icon-size: var(--eds-is-xs);\n    --_font-size: var(--eds-f-s-s);\n}\n:host([size=\"s\"]) {\n    --_size: var(--eds-si-3xl);\n    --_icon-size: var(--eds-is-s);\n    --_font-size: var(--eds-f-s-l);\n}\n:host([size=\"m\"]) {\n    --_size: var(--eds-si-4xl);\n    --_icon-size: var(--eds-is-m);\n    --_font-size: var(--eds-f-s-xl);\n}\n:host([size=\"l\"]) {\n    --_size: var(--eds-si-6xl);\n    --_icon-size: var(--eds-is-l);\n    --_font-size: var(--eds-f-s-2xl);\n}\n:host([size=\"xl\"]) {\n    --_size: var(--eds-si-9xl);\n    --_icon-size: var(--eds-is-xl);\n    --_font-size: var(--eds-f-s-4xl);\n}\n\n// COLOR PALETTE VARIANTS\n// ----------------------\n\n@each $color in base.$color-cm-map {\n    :host([color=\"#{$color}\"]) {\n        --_surface: var(--eds-c-surface-#{$color}-subtler);\n        --_on-surface: var(--eds-c-on-surface-#{$color}-subtler);\n    }\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    // surface channels consumed by projected sub-components (icon/text)\n    --_surface: var(--eds-c-surface-neutral-subtler);\n    --_on-surface: var(--eds-c-on-surface-neutral-subtler);\n\n    // default size = m\n    --_size: var(--eds-si-4xl);\n    --_icon-size: var(--eds-is-m);\n    --_font-size: var(--eds-f-s-xl);\n\n    // Status-badge channels — set on the avatar host and INHERITED (no ::ng-deep) down\n    // to the projected eds-avatar-badge > eds-badge > eds-icon, which consume them in\n    // their own stylesheets (eds-badge.scss `:host-context(.eds-avatar)`). Defaults =\n    // size m; each size variant below overrides them.\n    --_eds-avatar-badge-size: var(--eds-sp-m); //EDS aligned 16px badge Ø\n    --_eds-avatar-badge-icon-size: var(--eds-is-2xs);  //EDS aligned 12px icon\n    --_eds-avatar-badge-ring-width: var(--eds-bw-s);  // inverted ring around the badge\n    // When the projected badge is empty (dot indicator), eds-badge sizes itself from\n    // its own `--_eds-badge-empty-size`; feed it the avatar's badge diameter (inherited)\n    // so a dot badge matches the per-size footprint without ::ng-deep.\n    --_eds-badge-empty-size: var(--_eds-avatar-badge-size);\n\n    display: inline-flex;\n    position: relative;\n    align-items: center;\n    gap: var(--eds-sp-s);\n    outline: var(--eds-bw-s) solid var(--eds-c-border-inverted);\n    outline-offset: -1px;\n    border-radius: var(--eds-br-full);\n\n    //For debug only!\n    // outline: 1px solid red; outline-offset: 0; border-radius: 0;\n\n    .eds-avatar-wrapper {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: var(--eds-br-full);\n        background-color: var(--_surface);\n        color: var(--_on-surface);\n        height: var(--_size);\n        width: var(--_size);\n        position: relative;\n    }\n\n    // STATUS BADGE — always anchored to the bottom-right of the avatar (see\n    // eds-avatar-badge.scss for positioning). Sizing / centering / icon-scaling of the\n    // projected eds-badge live in eds-badge.scss under `:host-context(.eds-avatar)`,\n    // driven by the inherited `--_eds-avatar-badge-*` channels above — NO ::ng-deep.\n}\n\n// SIZE VARIANTS\n// -------------\n\n:host([size=\"2xs\"]) {\n    --_size: var(--eds-si-m);\n    --_icon-size: var(--eds-is-2xs);\n    --_font-size: var(--eds-f-s-xs);\n    // 16px avatar → dot-only badge, no inner icon.\n    --_eds-avatar-badge-size: var(--eds-sp-xs);   //EDS aligned 8px dot\n\n}\n:host([size=\"xs\"]) {\n    --_size: var(--eds-si-xl);\n    --_icon-size: var(--eds-is-xs);\n    --_font-size: var(--eds-f-s-s);\n    // 24px avatar → dot-only badge, no inner icon.\n    --_eds-avatar-badge-size: var(--eds-sp-xs);   //EDS aligned 8px dot\n}\n:host([size=\"s\"]) {\n    --_size: var(--eds-si-3xl);\n    --_icon-size: var(--eds-is-s);\n    --_font-size: var(--eds-f-s-l);\n    --_eds-avatar-badge-size: var(--eds-sp-s);  //EDS aligned 12px badge Ø\n    --_eds-avatar-badge-icon-size: var(--eds-is-3xs);   //EDS aligned 8px icon\n}\n:host([size=\"m\"]) {\n    --_size: var(--eds-si-4xl);\n    --_icon-size: var(--eds-is-s);  //m\n    --_font-size: var(--eds-f-s-xl);\n    --_eds-avatar-badge-size: var(--eds-sp-m); //EDS aligned 16px badge Ø\n    --_eds-avatar-badge-icon-size: var(--eds-is-2xs);  //EDS aligned 12px icon\n}\n:host([size=\"l\"]) {\n    --_size: var(--eds-si-6xl);\n    --_icon-size: var(--eds-is-l);\n    --_font-size: var(--eds-f-s-2xl);\n    --_eds-avatar-badge-size: var(--eds-sp-l);  //EDS aligned 20px badge Ø\n    --_eds-avatar-badge-icon-size: var(--eds-is-2xs);  //EDS aligned 12px icon\n}\n:host([size=\"xl\"]) {\n    --_size: var(--eds-si-9xl);\n    --_icon-size: var(--eds-is-xl);\n    --_font-size: var(--eds-f-s-4xl);\n    --_eds-avatar-badge-size: var(--eds-sp-xl); // EDS aligned\n    --_eds-avatar-badge-icon-size: var(--eds-is-xs);  //EDS aligned 16px icon\n}\n\n// DOT-ONLY sizes (2xs, xs): render a bare colored dot. The avatar flags the dot mode\n// and collapses the status icon purely through INHERITED custom properties (no\n// ::ng-deep); eds-badge.scss `:host-context(.eds-avatar)` reads these channels.\n:host([size=\"2xs\"]),\n:host([size=\"xs\"]) {\n    // thinner inverted ring so the small dot stays legible\n    --_eds-avatar-badge-ring-width: var(--eds-bw-xs);\n    // collapse any projected status icon to 0 → effectively a bare colored dot\n    --_eds-avatar-badge-icon-size: 0px;\n}\n\n// COLOR PALETTE VARIANTS\n// ----------------------\n\n@each $color in base.$color-cm-map {\n    :host([color=\"#{$color}\"]) {\n        --_surface: var(--eds-c-surface-#{$color}-subtler);\n        --_on-surface: var(--eds-c-on-surface-#{$color}-subtler);\n    }\n}\n",
                     "styleUrl": "./eds-avatar.scss"
                 }
             ],
@@ -26603,7 +26603,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": ".eds-avatar {\n    :host {\n        position: absolute;\n        display: inline-flex;\n    }\n}\n\n// default position (size m)\n.eds-avatar,\n.eds-avatar[size=\"m\"] {\n    :host {\n        left: var(--eds-si-xl);\n        top: var(--eds-si-xl);\n    }\n}\n\n.eds-avatar[size=\"2xs\"] {\n    :host {\n        left: var(--eds-si-xs);\n        top: var(--eds-si-xs);\n    }\n}\n.eds-avatar[size=\"xs\"] {\n    :host {\n        left: var(--eds-si-m);\n        top: var(--eds-si-m);\n    }\n}\n.eds-avatar[size=\"s\"] {\n    :host {\n        left: var(--eds-si-l);\n        top: var(--eds-si-l);\n    }\n}\n.eds-avatar[size=\"l\"] {\n    :host {\n        left: var(--eds-si-2xl);\n        top: var(--eds-si-2xl);\n    }\n}\n.eds-avatar[size=\"xl\"] {\n    :host {\n        left: var(--eds-si-4xl);\n        top: var(--eds-si-4xl);\n    }\n}\n",
+                    "data": "// eds-avatar-badge is a thin positioning wrapper for a projected status badge.\n// It is always anchored to the bottom-right of the avatar; the exact offset and the\n// badge/icon scaling per avatar size are driven by the parent eds-avatar (see\n// eds-avatar.scss, keyed off the avatar's reflected `size` attribute) so the badge\n// stays correct regardless of the size passed to the inner eds-badge.\n:host {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    display: inline-flex;\n}\n",
                     "styleUrl": "./eds-avatar-badge.scss"
                 }
             ],
@@ -26913,7 +26913,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": ".eds-avatar {\n    :host.eds-avatar-image {\n        .eds-avatar-image-wrapper {\n            background-size: cover;\n            height: var(--_size);\n            width: var(--_size);\n\n            img {\n                border-radius: var(--eds-br-full);\n                height: var(--_size);\n                width: var(--_size);\n            }\n        }\n\n        ::ng-deep .eds-icon-svg {\n            svg {\n                height: var(--_size);\n                width: var(--_size);\n            }\n        }\n    }\n\n    :host.eds-avatar-image[default] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n}\n",
+                    "data": ".eds-avatar {\n    :host.eds-avatar-image {\n        .eds-avatar-image-wrapper {\n            display: flex;\n            background-size: cover;\n            height: var(--_size);\n            width: var(--_size);\n\n            img {\n                border-radius: var(--eds-br-full);\n                height: var(--_size);\n                width: var(--_size);\n            }\n        }\n\n        // Fallback user icon (shown when no imageUrl) fills the whole avatar circle.\n        // Drive the projected eds-icon through its inherited `--_icon-size` channel so\n        // it renders at the avatar diameter — no ::ng-deep needed to reach the svg.\n        --_icon-size: var(--_size);\n    }\n\n    :host.eds-avatar-image[default] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n}\n",
                     "styleUrl": "./eds-avatar-image.scss"
                 }
             ],
@@ -27442,7 +27442,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "@use '../base' as base;\n\n:host {\n    // Common defaults\n    --_eds-badge-padding: 0 var(--eds-sp-3xs);\n    --_eds-badge-border-radius: var(--eds-br-full);\n    --_eds-badge-border-width: var(--eds-bw-xs);\n    --_eds-badge-font: var(--eds-f-microcopy-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n    --_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-3xs));\n    --_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-3xs));\n    --_eds-badge-empty-size: var(--eds-sp-s);\n\n    // Default color (neutral)\n    --_eds-badge-surface: var(--eds-c-surface-neutral);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral);\n    --_eds-badge-border-color: var(--eds-c-border-neutral-subtle);\n\n    display: inline-flex;\n    border: var(--_eds-badge-border-width) solid var(--_eds-badge-border-color);\n    border-radius: var(--_eds-badge-border-radius);\n    background-color: var(--_eds-badge-surface);\n\n    // a projected eds-icon follows the badge foreground (on-surface) color\n    --_eds-icon-on-surface: var(--_eds-badge-on-surface);\n\n    // Reset the icon-size channel so a value inherited from a composing ancestor\n    // (e.g. eds-avatar sets `--_icon-size` for its own slot) does NOT leak into the\n    // badge's projected icon; the icon falls back to its own `size` attribute.\n    --_icon-size: initial;\n\n    .eds-badge__wrapper {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        color: var(--_eds-badge-on-surface);\n        height: var(--_eds-badge-height);\n        min-width: var(--_eds-badge-min-width);\n        padding: var(--_eds-badge-padding);\n        font: var(--_eds-badge-font);\n        font-weight: var(--_eds-badge-font-weight);\n        @include base.eds-ellipsis();\n    }\n}\n\n// COLOR — filled (default) surface / foreground / border\n:host([color=\"primary\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-primary);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-primary);\n    --_eds-badge-border-color: var(--eds-c-border-primary-subtle);\n}\n:host([color=\"neutral\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-neutral);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral);\n    --_eds-badge-border-color: var(--eds-c-border-neutral-subtle);\n}\n:host([color=\"success\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-success);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-success);\n    --_eds-badge-border-color: var(--eds-c-border-success-subtle);\n}\n:host([color=\"info\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-info);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-info);\n    --_eds-badge-border-color: var(--eds-c-border-info-subtle);\n}\n:host([color=\"warning\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-warning);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-warning);\n    --_eds-badge-border-color: var(--eds-c-border-warning-subtle);\n}\n:host([color=\"critical\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-critical);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-critical);\n    --_eds-badge-border-color: var(--eds-c-border-critical-subtle);\n}\n\n// VARIANT — light: subtle semantic surface with a matching subtler foreground\n:host([variant=\"light\"][color=\"primary\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-primary-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-primary-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-primary-subtler);\n}\n:host([variant=\"light\"][color=\"neutral\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-neutral-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-neutral-subtler);\n}\n:host([variant=\"light\"][color=\"success\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-success-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-success-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-success-subtler);\n}\n:host([variant=\"light\"][color=\"info\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-info-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-info-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-info-subtler);\n}\n:host([variant=\"light\"][color=\"warning\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-warning-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-warning-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-warning-subtler);\n}\n:host([variant=\"light\"][color=\"critical\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-critical-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-critical-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-critical-subtler);\n}\n\n// SIZE\n:host([size=\"xs\"]) {\n    --_eds-badge-height: var(--eds-sp-s);\n    --_eds-badge-min-width: var(--eds-sp-s);\n    --_eds-badge-font: var(--eds-f-supportive-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n    --_eds-badge-empty-size: var(--eds-sp-2xs);\n}\n:host([size=\"s\"]) {\n    --_eds-badge-height: var(--eds-sp-m);\n    --_eds-badge-min-width: var(--eds-sp-m);\n    --_eds-badge-font: var(--eds-f-supportive-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n}\n:host([size=\"l\"]) {\n    --_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-2xs));\n    --_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-2xs));\n    --_eds-badge-font: var(--eds-f-microcopy-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n    --_eds-badge-empty-size: var(--eds-sp-m);\n}\n\n// EMPTY — dot badge, no content in wrapper\n:host([empty]) {\n    width: var(--_eds-badge-empty-size);\n    height: var(--_eds-badge-empty-size);\n}\n\n// ICON-ONLY — circular indicator holding a single small icon, no wrapper padding\n:host([icon-only]) {\n    .eds-badge__wrapper {\n        padding: 0;\n        width: var(--_eds-badge-height);\n        min-width: var(--_eds-badge-height);\n    }\n}\n\n// CONTEXTUAL POSITIONING — badge projected inside icon / icon-button / avatar\n// ---------------------------------------------------------------------------\n// The badge is content-projected into another component's host, so it must react\n// to that ancestor via :host-context() (the ancestor lives in a different\n// encapsulation scope; a plain descendant selector would not match).\n\n// icon > badge\n:host-context(.eds-icon) {\n    position: absolute;\n    left: 60%;\n    top: -20%;\n}\n\n:host([empty]):host-context(.eds-icon) {\n    left: 60%;\n    top: -10%;\n}\n\n:host([size=\"xs\"][empty]):host-context(.eds-icon) {\n    left: 70%;\n    top: -10%;\n}\n\n// icon-button (per size) > icon > badge\n:host-context(.eds-icon-button[size=\"2xs\"]) {\n    left: 50%;\n    top: -30%;\n}\n\n:host-context(.eds-icon-button[size=\"xs\"]) {\n    left: 50%;\n    top: -40%;\n}\n\n:host-context(.eds-icon-button[size=\"s\"]) {\n    left: 50%;\n    top: -50%;\n}\n\n:host-context(.eds-icon-button[size=\"m\"]) {\n    left: 50%;\n    top: -40%;\n}\n\n:host-context(.eds-icon-button[size=\"l\"]) {\n    left: 50%;\n    top: -25%;\n}\n\n// avatar > badge\n:host-context(.eds-avatar) {\n    border: var(--eds-bw-s) solid var(--eds-c-border-inverted);\n}\n",
+                    "data": "@use '../base' as base;\n\n:host {\n    // Common defaults\n    --_eds-badge-padding: 0 var(--eds-sp-3xs);\n    --_eds-badge-border-radius: var(--eds-br-full);\n    --_eds-badge-border-width: var(--eds-bw-xs);\n    --_eds-badge-font: var(--eds-f-microcopy-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n    --_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-3xs));\n    --_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-3xs));\n    --_eds-badge-empty-size: var(--eds-sp-s);\n\n    // Default color (neutral)\n    --_eds-badge-surface: var(--eds-c-surface-neutral);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral);\n    --_eds-badge-border-color: var(--eds-c-border-neutral-subtle);\n\n    display: inline-flex;\n    border: var(--_eds-badge-border-width) solid var(--_eds-badge-border-color);\n    border-radius: var(--_eds-badge-border-radius);\n    background-color: var(--_eds-badge-surface);\n\n    // a projected eds-icon follows the badge foreground (on-surface) color\n    --_eds-icon-on-surface: var(--_eds-badge-on-surface);\n\n    // Reset the icon-size channel so a value inherited from a composing ancestor\n    // (e.g. eds-avatar sets `--_icon-size` for its own slot) does NOT leak into the\n    // badge's projected icon; the icon falls back to its own `size` attribute.\n    --_icon-size: initial;\n\n    .eds-badge__wrapper {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        color: var(--_eds-badge-on-surface);\n        height: var(--_eds-badge-height);\n        min-width: var(--_eds-badge-min-width);\n        padding: var(--_eds-badge-padding);\n        font: var(--_eds-badge-font);\n        font-weight: var(--_eds-badge-font-weight);\n        @include base.eds-ellipsis();\n    }\n}\n\n// COLOR — filled (default) surface / foreground / border\n:host([color=\"primary\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-primary);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-primary);\n    --_eds-badge-border-color: var(--eds-c-border-primary-subtle);\n}\n:host([color=\"neutral\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-neutral);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral);\n    --_eds-badge-border-color: var(--eds-c-border-neutral-subtle);\n}\n:host([color=\"success\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-success);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-success);\n    --_eds-badge-border-color: var(--eds-c-border-success-subtle);\n}\n:host([color=\"info\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-info);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-info);\n    --_eds-badge-border-color: var(--eds-c-border-info-subtle);\n}\n:host([color=\"warning\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-warning);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-warning);\n    --_eds-badge-border-color: var(--eds-c-border-warning-subtle);\n}\n:host([color=\"critical\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-critical);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-critical);\n    --_eds-badge-border-color: var(--eds-c-border-critical-subtle);\n}\n\n// VARIANT — light: subtle semantic surface with a matching subtler foreground\n:host([variant=\"light\"][color=\"primary\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-primary-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-primary-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-primary-subtler);\n}\n:host([variant=\"light\"][color=\"neutral\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-neutral-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-neutral-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-neutral-subtler);\n}\n:host([variant=\"light\"][color=\"success\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-success-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-success-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-success-subtler);\n}\n:host([variant=\"light\"][color=\"info\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-info-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-info-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-info-subtler);\n}\n:host([variant=\"light\"][color=\"warning\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-warning-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-warning-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-warning-subtler);\n}\n:host([variant=\"light\"][color=\"critical\"]) {\n    --_eds-badge-surface: var(--eds-c-surface-critical-subtler);\n    --_eds-badge-on-surface: var(--eds-c-on-surface-critical-subtler);\n    --_eds-badge-border-color: var(--eds-c-border-critical-subtler);\n}\n\n// SIZE\n:host([size=\"xs\"]) {\n    --_eds-badge-height: var(--eds-sp-s);\n    --_eds-badge-min-width: var(--eds-sp-s);\n    --_eds-badge-font: var(--eds-f-supportive-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n    --_eds-badge-empty-size: var(--eds-sp-2xs);\n}\n:host([size=\"s\"]) {\n    --_eds-badge-height: var(--eds-sp-m);\n    --_eds-badge-min-width: var(--eds-sp-m);\n    --_eds-badge-font: var(--eds-f-supportive-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n}\n:host([size=\"l\"]) {\n    --_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-2xs));\n    --_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-2xs));\n    --_eds-badge-font: var(--eds-f-microcopy-m);\n    --_eds-badge-font-weight: var(--eds-f-w-regular);\n    --_eds-badge-empty-size: var(--eds-sp-m);\n}\n\n// EMPTY — dot badge, no content in wrapper\n:host([empty]) {\n    width: var(--_eds-badge-empty-size);\n    height: var(--_eds-badge-empty-size);\n}\n\n// ICON-ONLY — circular indicator holding a single small icon, no wrapper padding\n:host([icon-only]) {\n    .eds-badge__wrapper {\n        padding: 0;\n        width: var(--_eds-badge-height);\n        min-width: var(--_eds-badge-height);\n    }\n}\n\n// CONTEXTUAL POSITIONING — badge projected inside icon / icon-button / avatar\n// ---------------------------------------------------------------------------\n// The badge is content-projected into another component's host, so it must react\n// to that ancestor via :host-context() (the ancestor lives in a different\n// encapsulation scope; a plain descendant selector would not match).\n\n// icon > badge\n:host-context(.eds-icon) {\n    position: absolute;\n    left: 60%;\n    top: -20%;\n}\n\n:host([empty]):host-context(.eds-icon) {\n    left: 60%;\n    top: -10%;\n}\n\n:host([size=\"xs\"][empty]):host-context(.eds-icon) {\n    left: 70%;\n    top: -10%;\n}\n\n// icon-button (per size) > icon > badge\n:host-context(.eds-icon-button[size=\"2xs\"]) {\n    left: 50%;\n    top: -30%;\n}\n\n:host-context(.eds-icon-button[size=\"xs\"]) {\n    left: 50%;\n    top: -40%;\n}\n\n:host-context(.eds-icon-button[size=\"s\"]) {\n    left: 50%;\n    top: -50%;\n}\n\n:host-context(.eds-icon-button[size=\"m\"]) {\n    left: 50%;\n    top: -40%;\n}\n\n:host-context(.eds-icon-button[size=\"l\"]) {\n    left: 50%;\n    top: -25%;\n}\n\n// avatar > badge\n// Sizing / centering / icon-scaling of a badge projected into an avatar is driven by\n// the avatar via INHERITED custom properties (--_eds-avatar-badge-*), consumed here so\n// the avatar needs no ::ng-deep to reach this projected badge.\n:host-context(.eds-avatar) {\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_eds-avatar-badge-size);\n    min-width: var(--_eds-avatar-badge-size);\n    height: var(--_eds-avatar-badge-size);\n    padding: 0;\n    border: var(--_eds-avatar-badge-ring-width, var(--eds-bw-s)) solid var(--eds-c-border-inverted);\n\n    // Scale the projected status icon with the avatar size. eds-icon reads the\n    // inherited `--_icon-size` channel (which eds-badge otherwise resets to `initial`);\n    // this higher-specificity rule re-feeds it from the avatar's icon-size channel.\n    --_icon-size: var(--_eds-avatar-badge-icon-size);\n\n    .eds-badge__wrapper {\n        display: flex;\n        flex: 1 1 auto;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        min-width: 0;\n        height: 100%;\n        padding: 0;\n        line-height: 0;\n    }\n}\n",
                     "styleUrl": "./eds-badge.scss"
                 }
             ],
@@ -59776,7 +59776,7 @@
         },
         {
             "name": "EdsInputButton",
-            "id": "component-EdsInputButton-457d7bd718ef9cb38b568f7b567a8f015d3cb04aad6ce86a12e00a5a3a589b7523492a4c6c9b1fe90b09ba6ac0b8541ff982cbe42c5eecfe009a5a25ea95847e",
+            "id": "component-EdsInputButton-045d548163c1eb2f7bee0b8ed1cf9a7827818343809dc7b8071673d1abd2b5443d7260c3abc86b6161166d1e6cba7b170c72ac1704328fd6c08728c3fb7c835a",
             "file": "packages/eds/eds-input-button/eds-input-button.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -59807,20 +59807,20 @@
                     "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-button&#39;</p>\n",
-                    "line": 53,
+                    "line": 79,
                     "rawdescription": "\n\nData attribute value for end-to-end testing identification.\nApplied as data-e2e attribute on the host element.\n'eds-input-button'\n",
                     "jsdoctags": [
                         {
-                            "pos": 1742,
-                            "end": 1775,
+                            "pos": 2731,
+                            "end": 2764,
                             "kind": 328,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1743,
-                                "end": 1750,
+                                "pos": 2732,
+                                "end": 2739,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -59842,7 +59842,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Positions the button at the end (right in LTR, left in RTL) of the input field.\nIgnored when edsButtonPositionStart is true. Defaults to true.</p>\n",
-                    "line": 65,
+                    "line": 91,
                     "rawdescription": "\n\nPositions the button at the end (right in LTR, left in RTL) of the input field.\nIgnored when edsButtonPositionStart is true. Defaults to true.\n",
                     "required": false
                 },
@@ -59856,7 +59856,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Positions the button at the start (left in LTR, right in RTL) of the input field.\nWhen true, overrides edsButtonPositionEnd. Defaults to false.</p>\n",
-                    "line": 59,
+                    "line": 85,
                     "rawdescription": "\n\nPositions the button at the start (left in LTR, right in RTL) of the input field.\nWhen true, overrides edsButtonPositionEnd. Defaults to false.\n",
                     "required": false
                 }
@@ -59873,7 +59873,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Resolved button position, reflected as the <code>position</code> host attribute.\n<code>start</code> takes precedence when both inputs are set.</p>\n",
-                    "line": 71,
+                    "line": 97,
                     "rawdescription": "\n\nResolved button position, reflected as the `position` host attribute.\n`start` takes precedence when both inputs are set.\n",
                     "modifierKind": [
                         124,
@@ -59881,7 +59881,84 @@
                     ]
                 }
             ],
-            "methodsClass": [],
+            "methodsClass": [
+                {
+                    "name": "onFocusIn",
+                    "coverageIgnore": false,
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "FocusEvent",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 163,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nTrack focus entering a projected control so the arrow keys continue from\nthe control the user is actually on (e.g. after a click), and keep the\nroving tab stop in sync so a subsequent `Tab` leaves from here.\n",
+                    "description": "<p>Track focus entering a projected control so the arrow keys continue from\nthe control the user is actually on (e.g. after a click), and keep the\nroving tab stop in sync so a subsequent <code>Tab</code> leaves from here.</p>\n",
+                    "modifierKind": [
+                        124
+                    ],
+                    "jsdoctags": [
+                        {
+                            "name": "event",
+                            "type": "FocusEvent",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "name": "onKeydown",
+                    "coverageIgnore": false,
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "KeyboardEvent",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 171,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n",
+                    "description": "",
+                    "modifierKind": [
+                        124
+                    ],
+                    "jsdoctags": [
+                        {
+                            "name": "event",
+                            "type": "KeyboardEvent",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                }
+            ],
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
@@ -59889,40 +59966,49 @@
             "hostListeners": [],
             "standalone": false,
             "imports": [],
-            "description": "<p>A layout component that positions button elements relative to input fields.\nEnables the creation of input groups with leading or trailing action buttons,\ncommonly used for search inputs, password visibility toggles, or clear actions.</p>\n<h3>Button at end of input (default)</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-input-button&gt;\n  &lt;input edsInputText placeholder=&quot;Search...&quot; /&gt;\n  &lt;button edsButton&gt;Search&lt;/button&gt;\n&lt;/eds-input-button&gt;</code></pre></div><h3>Button at start of input</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-input-button [edsButtonPositionStart]=&quot;true&quot;&gt;\n  &lt;button edsIconButton icon=&quot;filter&quot; ariaLabel=&quot;Filter&quot;&gt;&lt;/button&gt;\n  &lt;input edsInputText placeholder=&quot;Filter results...&quot; /&gt;\n&lt;/eds-input-button&gt;</code></pre></div><h3>Accessibility</h3>\n<ul>\n<li>Button and input maintain separate focus states</li>\n<li>Ensure button has descriptive label or aria-label</li>\n<li>Tab order follows visual layout</li>\n</ul>\n<h3>Notes</h3>\n<ul>\n<li>Default position is end (right in LTR)</li>\n<li>When <code>edsButtonPositionStart</code> is true, it overrides end positioning</li>\n<li>Works with all button variants (edsButton, edsIconButton)</li>\n<li>Commonly used for search, clear, and submit actions</li>\n</ul>\n",
-            "rawdescription": "\n\nA layout component that positions button elements relative to input fields.\nEnables the creation of input groups with leading or trailing action buttons,\ncommonly used for search inputs, password visibility toggles, or clear actions.\n\n### Button at end of input (default)\n```html\n<eds-input-button>\n  <input edsInputText placeholder=\"Search...\" />\n  <button edsButton>Search</button>\n</eds-input-button>\n```\n\n### Button at start of input\n```html\n<eds-input-button [edsButtonPositionStart]=\"true\">\n  <button edsIconButton icon=\"filter\" ariaLabel=\"Filter\"></button>\n  <input edsInputText placeholder=\"Filter results...\" />\n</eds-input-button>\n```\n\n### Accessibility\n- Button and input maintain separate focus states\n- Ensure button has descriptive label or aria-label\n- Tab order follows visual layout\n\n### Notes\n- Default position is end (right in LTR)\n- When `edsButtonPositionStart` is true, it overrides end positioning\n- Works with all button variants (edsButton, edsIconButton)\n- Commonly used for search, clear, and submit actions\n",
+            "description": "<p>A layout component that positions button elements relative to input fields.\nEnables the creation of input groups with leading or trailing action buttons,\ncommonly used for search inputs, password visibility toggles, or clear actions.</p>\n<h3>Button at end of input (default)</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-input-button&gt;\n  &lt;input edsInputText placeholder=&quot;Search...&quot; /&gt;\n  &lt;button edsButton&gt;Search&lt;/button&gt;\n&lt;/eds-input-button&gt;</code></pre></div><h3>Button at start of input</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-input-button [edsButtonPositionStart]=&quot;true&quot;&gt;\n  &lt;button edsIconButton icon=&quot;filter&quot; ariaLabel=&quot;Filter&quot;&gt;&lt;/button&gt;\n  &lt;input edsInputText placeholder=&quot;Filter results...&quot; /&gt;\n&lt;/eds-input-button&gt;</code></pre></div><h3>Focus model (roving tabindex)</h3>\n<ul>\n<li><code>Tab</code> moves focus directly onto the input field (the primary control); the\nfocus ring covers the whole host (the group). <code>Tab</code> again leaves the group.</li>\n<li><code>ArrowLeft</code> / <code>ArrowRight</code> rove focus between the group&#39;s controls in visual\norder — the input, the clearable &quot;✕&quot; icon (when present), and the button —\nwrapping at the ends; <code>Home</code> / <code>End</code> jump to the first / last control.</li>\n<li>Only the active control is in the tab order, so <code>Tab</code> leaves the group from\nwherever focus currently is. Focusing a child directly (click) adopts it as\nthe active roving target.</li>\n</ul>\n<h3>Accessibility</h3>\n<ul>\n<li>Single tab stop with arrow-key navigation between the controls</li>\n<li>The clearable icon participates in the arrow-key cycle when it is shown</li>\n<li>Ensure button has a descriptive label or aria-label</li>\n<li>Tab order follows visual layout</li>\n</ul>\n<h3>Notes</h3>\n<ul>\n<li>Default position is end (right in LTR)</li>\n<li>When <code>edsButtonPositionStart</code> is true, it overrides end positioning</li>\n<li>Works with all button variants (edsButton, edsIconButton)</li>\n<li>Commonly used for search, clear, and submit actions</li>\n</ul>\n",
+            "rawdescription": "\n\nA layout component that positions button elements relative to input fields.\nEnables the creation of input groups with leading or trailing action buttons,\ncommonly used for search inputs, password visibility toggles, or clear actions.\n\n### Button at end of input (default)\n```html\n<eds-input-button>\n  <input edsInputText placeholder=\"Search...\" />\n  <button edsButton>Search</button>\n</eds-input-button>\n```\n\n### Button at start of input\n```html\n<eds-input-button [edsButtonPositionStart]=\"true\">\n  <button edsIconButton icon=\"filter\" ariaLabel=\"Filter\"></button>\n  <input edsInputText placeholder=\"Filter results...\" />\n</eds-input-button>\n```\n\n### Focus model (roving tabindex)\n- `Tab` moves focus directly onto the input field (the primary control); the\n  focus ring covers the whole host (the group). `Tab` again leaves the group.\n- `ArrowLeft` / `ArrowRight` rove focus between the group's controls in visual\n  order — the input, the clearable \"✕\" icon (when present), and the button —\n  wrapping at the ends; `Home` / `End` jump to the first / last control.\n- Only the active control is in the tab order, so `Tab` leaves the group from\n  wherever focus currently is. Focusing a child directly (click) adopts it as\n  the active roving target.\n\n### Accessibility\n- Single tab stop with arrow-key navigation between the controls\n- The clearable icon participates in the arrow-key cycle when it is shown\n- Ensure button has a descriptive label or aria-label\n- Tab order follows visual layout\n\n### Notes\n- Default position is end (right in LTR)\n- When `edsButtonPositionStart` is true, it overrides end positioning\n- Works with all button variants (edsButton, edsIconButton)\n- Commonly used for search, clear, and submit actions\n",
             "type": "component",
-            "sourceCode": "import { ChangeDetectionStrategy, Component, booleanAttribute, input, computed } from '@angular/core';\n\n/**\n * A layout component that positions button elements relative to input fields.\n * Enables the creation of input groups with leading or trailing action buttons,\n * commonly used for search inputs, password visibility toggles, or clear actions.\n *\n * @usageNotes\n * ### Button at end of input (default)\n * ```html\n * <eds-input-button>\n *   <input edsInputText placeholder=\"Search...\" />\n *   <button edsButton>Search</button>\n * </eds-input-button>\n * ```\n *\n * ### Button at start of input\n * ```html\n * <eds-input-button [edsButtonPositionStart]=\"true\">\n *   <button edsIconButton icon=\"filter\" ariaLabel=\"Filter\"></button>\n *   <input edsInputText placeholder=\"Filter results...\" />\n * </eds-input-button>\n * ```\n *\n * ### Accessibility\n * - Button and input maintain separate focus states\n * - Ensure button has descriptive label or aria-label\n * - Tab order follows visual layout\n *\n * ### Notes\n * - Default position is end (right in LTR)\n * - When `edsButtonPositionStart` is true, it overrides end positioning\n * - Works with all button variants (edsButton, edsIconButton)\n * - Commonly used for search, clear, and submit actions\n */\n@Component({\n    selector: 'eds-input-button',\n    templateUrl: './eds-input-button.html',\n    styleUrl: './eds-input-button.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'eds-input-button',\n        '[attr.position]': 'position()',\n        '[attr.data-e2e]': 'e2eAttr()',\n    },\n})\nexport class EdsInputButton {\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-button'\n     */\n    e2eAttr = input('eds-input-button');\n\n    /**\n     * Positions the button at the start (left in LTR, right in RTL) of the input field.\n     * When true, overrides edsButtonPositionEnd. Defaults to false.\n     */\n    edsButtonPositionStart = input(false, { transform: booleanAttribute });\n\n    /**\n     * Positions the button at the end (right in LTR, left in RTL) of the input field.\n     * Ignored when edsButtonPositionStart is true. Defaults to true.\n     */\n    edsButtonPositionEnd = input(true, { transform: booleanAttribute });\n\n    /**\n     * Resolved button position, reflected as the `position` host attribute.\n     * `start` takes precedence when both inputs are set.\n     */\n    protected readonly position = computed<'start' | 'end'>(() =>\n        this.edsButtonPositionStart() ? 'start' : 'end',\n    );\n}\n",
+            "sourceCode": "import {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    afterNextRender,\n    booleanAttribute,\n    computed,\n    inject,\n    input,\n    signal,\n} from '@angular/core';\n\n/**\n * A layout component that positions button elements relative to input fields.\n * Enables the creation of input groups with leading or trailing action buttons,\n * commonly used for search inputs, password visibility toggles, or clear actions.\n *\n * @usageNotes\n * ### Button at end of input (default)\n * ```html\n * <eds-input-button>\n *   <input edsInputText placeholder=\"Search...\" />\n *   <button edsButton>Search</button>\n * </eds-input-button>\n * ```\n *\n * ### Button at start of input\n * ```html\n * <eds-input-button [edsButtonPositionStart]=\"true\">\n *   <button edsIconButton icon=\"filter\" ariaLabel=\"Filter\"></button>\n *   <input edsInputText placeholder=\"Filter results...\" />\n * </eds-input-button>\n * ```\n *\n * ### Focus model (roving tabindex)\n * - `Tab` moves focus directly onto the input field (the primary control); the\n *   focus ring covers the whole host (the group). `Tab` again leaves the group.\n * - `ArrowLeft` / `ArrowRight` rove focus between the group's controls in visual\n *   order — the input, the clearable \"✕\" icon (when present), and the button —\n *   wrapping at the ends; `Home` / `End` jump to the first / last control.\n * - Only the active control is in the tab order, so `Tab` leaves the group from\n *   wherever focus currently is. Focusing a child directly (click) adopts it as\n *   the active roving target.\n *\n * ### Accessibility\n * - Single tab stop with arrow-key navigation between the controls\n * - The clearable icon participates in the arrow-key cycle when it is shown\n * - Ensure button has a descriptive label or aria-label\n * - Tab order follows visual layout\n *\n * ### Notes\n * - Default position is end (right in LTR)\n * - When `edsButtonPositionStart` is true, it overrides end positioning\n * - Works with all button variants (edsButton, edsIconButton)\n * - Commonly used for search, clear, and submit actions\n */\n@Component({\n    selector: 'eds-input-button',\n    templateUrl: './eds-input-button.html',\n    styleUrl: './eds-input-button.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'eds-input-button',\n        role: 'group',\n        '[attr.position]': 'position()',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '(focusin)': 'onFocusIn($event)',\n        '(keydown)': 'onKeydown($event)',\n    },\n})\nexport class EdsInputButton {\n    private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\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-button'\n     */\n    e2eAttr = input('eds-input-button');\n\n    /**\n     * Positions the button at the start (left in LTR, right in RTL) of the input field.\n     * When true, overrides edsButtonPositionEnd. Defaults to false.\n     */\n    edsButtonPositionStart = input(false, { transform: booleanAttribute });\n\n    /**\n     * Positions the button at the end (right in LTR, left in RTL) of the input field.\n     * Ignored when edsButtonPositionStart is true. Defaults to true.\n     */\n    edsButtonPositionEnd = input(true, { transform: booleanAttribute });\n\n    /**\n     * Resolved button position, reflected as the `position` host attribute.\n     * `start` takes precedence when both inputs are set.\n     */\n    protected readonly position = computed<'start' | 'end'>(() =>\n        this.edsButtonPositionStart() ? 'start' : 'end',\n    );\n\n    /** Index (within {@link managedChildren}) of the roving active control. */\n    private readonly activeIndex = signal(0);\n\n    constructor() {\n        afterNextRender(() => this.resetRovingTabStop());\n    }\n\n    /**\n     * The group's controls that participate in arrow-key roving, in DOM order:\n     * the projected input/button plus the clearable \"✕\" icon (a `[tabindex]`\n     * element the eds-input-text clearable directive injects). Disabled and\n     * not-currently-rendered controls (e.g. the hidden clearable icon when the\n     * field is empty) are excluded so the cycle only visits reachable targets.\n     */\n    private managedChildren(): HTMLElement[] {\n        const selector = 'input, button, select, textarea, .eds-clearable-icon';\n        return Array.from(\n            this.host.nativeElement.querySelectorAll<HTMLElement>(selector),\n        ).filter((el) => {\n            if (el === this.host.nativeElement || el.hasAttribute('disabled')) {\n                return false;\n            }\n            // Skip controls that are not actually visible/rendered — notably the\n            // clearable icon, which is hidden (visibility:hidden) when empty.\n            if (getComputedStyle(el).visibility === 'hidden') {\n                return false;\n            }\n            return el.offsetParent !== null || getComputedStyle(el).position === 'fixed';\n        });\n    }\n\n    /**\n     * Index of the primary control that owns the natural tab stop — the input\n     * field (first `input`/`textarea`/`select`), so `Tab` lands directly on it.\n     * Falls back to the first child when there is no input-like control.\n     */\n    private primaryIndex(): number {\n        const children = this.managedChildren();\n        const inputIndex = children.findIndex((el) =>\n            /^(input|textarea|select)$/i.test(el.tagName),\n        );\n        return inputIndex >= 0 ? inputIndex : 0;\n    }\n\n    /**\n     * Roving tabindex: the primary (input) control stays in the natural tab\n     * order so `Tab` focuses it directly; every other control is reachable only\n     * via the arrow keys.\n     */\n    private resetRovingTabStop(): void {\n        const primary = this.primaryIndex();\n        this.activeIndex.set(primary);\n        this.managedChildren().forEach((el, index) =>\n            el.setAttribute('tabindex', index === primary ? '0' : '-1'),\n        );\n    }\n\n    /**\n     * Track focus entering a projected control so the arrow keys continue from\n     * the control the user is actually on (e.g. after a click), and keep the\n     * roving tab stop in sync so a subsequent `Tab` leaves from here.\n     */\n    protected onFocusIn(event: FocusEvent): void {\n        const target = event.target as HTMLElement;\n        const index = this.managedChildren().indexOf(target);\n        if (index >= 0) {\n            this.setActive(index);\n        }\n    }\n\n    protected onKeydown(event: KeyboardEvent): void {\n        const children = this.managedChildren();\n        if (children.length === 0) {\n            return;\n        }\n\n        switch (event.key) {\n            case 'ArrowRight':\n            case 'ArrowDown':\n                event.preventDefault();\n                this.focusChild(this.nextIndex(1));\n                break;\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                event.preventDefault();\n                this.focusChild(this.nextIndex(-1));\n                break;\n            case 'Home':\n                event.preventDefault();\n                this.focusChild(0);\n                break;\n            case 'End':\n                event.preventDefault();\n                this.focusChild(children.length - 1);\n                break;\n            default:\n                break;\n        }\n    }\n\n    private nextIndex(delta: number): number {\n        const count = this.managedChildren().length;\n        const current = this.activeIndex();\n        return (current + delta + count) % count;\n    }\n\n    private focusChild(index: number): void {\n        const target = this.managedChildren()[index];\n        if (!target) {\n            return;\n        }\n        this.setActive(index);\n        target.focus();\n    }\n\n    /**\n     * Move the single roving tab stop (`tabindex=\"0\"`) onto the active control\n     * and set every other control to `tabindex=\"-1\"`, so after arrow navigation\n     * `Tab` leaves the group from wherever focus currently is.\n     */\n    private setActive(index: number): void {\n        this.activeIndex.set(index);\n        this.managedChildren().forEach((el, i) =>\n            el.setAttribute('tabindex', i === index ? '0' : '-1'),\n        );\n    }\n}\n",
             "styleUrl": "./eds-input-button.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        ::ng-deep .eds-button {\n            border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n            background-color: var(--eds-c-surface-elevation);\n            position: relative;\n        }\n    }\n\n    // Position variants — reflected as the `position` host attribute (String-Props model).\n    :host([position=\"start\"]) {\n        flex-direction: row-reverse;\n\n        ::ng-deep .eds-button {\n            border-right: none;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n\n            &::after {\n                background-color: var(--eds-c-border-divider);\n                content: \"\";\n                display: block;\n                height: 1.75rem;\n                right: -1px;\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    :host([position=\"end\"]) {\n        ::ng-deep .eds-button {\n            border-left: none;\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n\n            &::before {\n                background-color: var(--eds-c-border-divider);\n                content: \"\";\n                display: block;\n                height: 1.75rem;\n                left: -1px;\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",
+                    "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        outline: none;\n\n        position: relative;\n\n        // The input must fill all space left of the button; the button keeps its\n        // intrinsic width. `order` makes the layout independent of DOM order:\n        // input first (grows), then the collapsed clear-icon wrapper at the\n        // input's trailing edge, then the button.\n        > ::ng-deep .eds-input-text,\n        > ::ng-deep input {\n            flex: 1 1 auto;\n            min-width: 0;\n            order: 1;\n        }\n\n        > ::ng-deep .eds-button,\n        > ::ng-deep button {\n            flex: 0 0 auto;\n            order: 3;\n        }\n\n        // The `clearable` eds-input-text injects a wrapper `div`\n        // (`display:flex; width:100%`). Its placement is non-deterministic under\n        // content projection: SOMETIMES the input is moved INTO the wrapper\n        // (`div > input + clear-icon`), SOMETIMES the input stays a direct host\n        // sibling and the wrapper is left EMPTY (icon only). Handle both:\n        //\n        //  • Wrapper that CONTAINS the input → it is the real input container, so\n        //    grow it (and the input inside already fills it). `order:1` keeps it\n        //    aligned with the bare-input case.\n        //  • EMPTY icon-only wrapper → collapse it to zero row space and `order`\n        //    it to the input's trailing edge so its absolutely positioned\n        //    clear-icon anchors just inside the input's right edge.\n        > ::ng-deep div:has(input),\n        > ::ng-deep div:has(.eds-input-text) {\n            flex: 1 1 auto !important;\n            width: auto !important;\n            min-width: 0;\n            order: 1;\n        }\n\n        > ::ng-deep div:not(:has(input)):not(:has(.eds-input-text)) {\n            flex: 0 0 0 !important;\n            width: 0 !important;\n            min-width: 0;\n            order: 2;\n        }\n\n        // The focus ring covers the entire host (the group) whenever focus is\n        // on one of the projected controls. Tab lands directly on the input;\n        // arrow keys then rove between the input and the button, and the ring\n        // stays on the whole group throughout.\n        &:focus-within {\n            outline: var(--eds-bw-s) solid var(--eds-c-border-focus);\n            outline-offset: var(--eds-bw-s);\n\n            // The group owns the focus ring — suppress the individual control's\n            // own focus outline so only one ring (around the whole host) shows.\n            // The projected eds-input-text wins with a high-specificity\n            // `!important` rule (`.eds-input-text:focus-visible:not([readonly])`),\n            // so the override must both use `!important` AND match or exceed that\n            // specificity. We mirror its compound (class + state + :not) and add\n            // the host context so this reliably wins.\n            ::ng-deep .eds-input-text:focus-visible:not([readonly]),\n            ::ng-deep .eds-input-text:focus:not([readonly]),\n            ::ng-deep input:focus-visible {\n                outline: none !important;\n                outline-offset: 0 !important;\n                box-shadow: none !important;\n            }\n\n            // When the inner button is the focused control (arrow-navigated to\n            // it), draw its focus ring INSET with a NEGATIVE offset so the ring\n            // sits inside the button's flush trailing edge and lines up with the\n            // group — rather than the button's default outline spilling outside.\n            // Covers both the text button (`.eds-button`) and the icon button\n            // (`.eds-icon-button`, used e.g. by eds-input-password's toggle).\n            ::ng-deep .eds-button:focus-visible,\n            ::ng-deep .eds-button:focus,\n            ::ng-deep .eds-icon-button:focus-visible,\n            ::ng-deep .eds-icon-button:focus {\n                outline: var(--eds-bw-s) solid var(--eds-c-border-focus) !important;\n                outline-offset: calc(-1 * var(--eds-bw-s)) !important;\n            }\n\n            // Critical / invalid state → the whole-group focus ring turns\n            // critical. The invalid signal is the projected input's `invalid`\n            // attribute (standalone usage) or a reflected `invalid` host\n            // attribute (set by a composing parent such as eds-input-password).\n            &:has(input[invalid]),\n            &:has(.eds-input-text[invalid]) {\n                outline-color: var(--eds-c-focus-critical);\n\n                ::ng-deep .eds-button:focus-visible,\n                ::ng-deep .eds-button:focus,\n                ::ng-deep .eds-icon-button:focus-visible,\n                ::ng-deep .eds-icon-button:focus {\n                    outline-color: var(--eds-c-focus-critical) !important;\n                }\n            }\n        }\n\n        // The projected eds-button sets its own `background-color: var(--_surface)`\n        // (transparent for the `secondary` variant) at EQUAL specificity to this\n        // rule, so it would win on source order and the field button would read\n        // as transparent. Force the elevated surface so the button always reads\n        // as a raised field affordance. (Only the background needs `!important`;\n        // the border is left overridable so the position-variant rules below can\n        // still drop the inner border to seamlessly join the input.)\n        ::ng-deep .eds-button {\n            border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n            background-color: var(--eds-c-surface-elevation) !important;\n            position: relative;\n        }\n    }\n\n    // Reflected host `invalid` (set by a composing parent such as\n    // eds-input-password) — critical whole-group focus ring while focus is\n    // inside the group, including the focused button segment.\n    :host([invalid]):focus-within {\n        outline-color: var(--eds-c-focus-critical);\n\n        ::ng-deep .eds-button:focus-visible,\n        ::ng-deep .eds-button:focus,\n        ::ng-deep .eds-icon-button:focus-visible,\n        ::ng-deep .eds-icon-button:focus {\n            outline-color: var(--eds-c-focus-critical) !important;\n        }\n    }\n\n    // Position variants — reflected as the `position` host attribute (String-Props model).\n    :host([position=\"start\"]) {\n        flex-direction: row-reverse;\n\n        ::ng-deep .eds-button {\n            border-right: none;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n\n            &::after {\n                background-color: var(--eds-c-border-divider);\n                content: \"\";\n                display: block;\n                height: 1.75rem;\n                right: -1px;\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    :host([position=\"end\"]) {\n        ::ng-deep .eds-button {\n            border-left: none;\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n\n            &::before {\n                background-color: var(--eds-c-border-divider);\n                content: \"\";\n                display: block;\n                height: 1.75rem;\n                left: -1px;\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-button.scss"
                 }
             ],
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 357,
-                    "end": 1246,
+                    "pos": 439,
+                    "end": 2054,
                     "kind": 328,
                     "id": 0,
                     "flags": 16777216,
                     "modifierFlagsCache": 0,
                     "transformFlags": 0,
                     "tagName": {
-                        "pos": 358,
-                        "end": 368,
+                        "pos": 440,
+                        "end": 450,
                         "kind": 80,
                         "id": 0,
                         "flags": 16777216,
                         "transformFlags": 0,
                         "escapedText": "usageNotes"
                     },
-                    "comment": "<h3>Button at end of input (default)</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-input-button&gt;\n  &lt;input edsInputText placeholder=&quot;Search...&quot; /&gt;\n  &lt;button edsButton&gt;Search&lt;/button&gt;\n&lt;/eds-input-button&gt;</code></pre></div><h3>Button at start of input</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-input-button [edsButtonPositionStart]=&quot;true&quot;&gt;\n  &lt;button edsIconButton icon=&quot;filter&quot; ariaLabel=&quot;Filter&quot;&gt;&lt;/button&gt;\n  &lt;input edsInputText placeholder=&quot;Filter results...&quot; /&gt;\n&lt;/eds-input-button&gt;</code></pre></div><h3>Accessibility</h3>\n<ul>\n<li>Button and input maintain separate focus states</li>\n<li>Ensure button has descriptive label or aria-label</li>\n<li>Tab order follows visual layout</li>\n</ul>\n<h3>Notes</h3>\n<ul>\n<li>Default position is end (right in LTR)</li>\n<li>When <code>edsButtonPositionStart</code> is true, it overrides end positioning</li>\n<li>Works with all button variants (edsButton, edsIconButton)</li>\n<li>Commonly used for search, clear, and submit actions</li>\n</ul>\n"
+                    "comment": "<h3>Button at end of input (default)</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-input-button&gt;\n  &lt;input edsInputText placeholder=&quot;Search...&quot; /&gt;\n  &lt;button edsButton&gt;Search&lt;/button&gt;\n&lt;/eds-input-button&gt;</code></pre></div><h3>Button at start of input</h3>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;eds-input-button [edsButtonPositionStart]=&quot;true&quot;&gt;\n  &lt;button edsIconButton icon=&quot;filter&quot; ariaLabel=&quot;Filter&quot;&gt;&lt;/button&gt;\n  &lt;input edsInputText placeholder=&quot;Filter results...&quot; /&gt;\n&lt;/eds-input-button&gt;</code></pre></div><h3>Focus model (roving tabindex)</h3>\n<ul>\n<li><code>Tab</code> moves focus directly onto the input field (the primary control); the\nfocus ring covers the whole host (the group). <code>Tab</code> again leaves the group.</li>\n<li><code>ArrowLeft</code> / <code>ArrowRight</code> rove focus between the group&#39;s controls in visual\norder — the input, the clearable &quot;✕&quot; icon (when present), and the button —\nwrapping at the ends; <code>Home</code> / <code>End</code> jump to the first / last control.</li>\n<li>Only the active control is in the tab order, so <code>Tab</code> leaves the group from\nwherever focus currently is. Focusing a child directly (click) adopts it as\nthe active roving target.</li>\n</ul>\n<h3>Accessibility</h3>\n<ul>\n<li>Single tab stop with arrow-key navigation between the controls</li>\n<li>The clearable icon participates in the arrow-key cycle when it is shown</li>\n<li>Ensure button has a descriptive label or aria-label</li>\n<li>Tab order follows visual layout</li>\n</ul>\n<h3>Notes</h3>\n<ul>\n<li>Default position is end (right in LTR)</li>\n<li>When <code>edsButtonPositionStart</code> is true, it overrides end positioning</li>\n<li>Works with all button variants (edsButton, edsIconButton)</li>\n<li>Commonly used for search, clear, and submit actions</li>\n</ul>\n"
                 }
             ],
+            "constructorObj": {
+                "name": "constructor",
+                "description": "",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "args": [],
+                "line": 102,
+                "rawdescription": "\n"
+            },
             "extends": [],
             "relationships": {
                 "incoming": [],

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-10-09T13:20:41.445Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-10-09T14:58:15.510Z, llm-md export.
 
 ## Components
 
@@ -2244,7 +2244,7 @@ File: `packages/eds/eds-input-button/eds-input-button.ts`
 Selector: `eds-input-button`
 Change detection: `ChangeDetectionStrategy.OnPush`
 
-Description: A layout component that positions button elements relative to input fields. Enables the creation of input groups with leading or trailing action buttons, commonly used for search inputs, password visibility toggles, or clear actions. Button at end of input (default) Example : \<eds-input-button\> \<input edsInputText placeholder="Search..." /\> \<button edsButton\>Search\</button\> \</eds-input-button\> Button at start of input Example : \<eds-input-button \[edsButtonPositionStart\]="true"\> \<button edsIconButton icon="filter" ariaLabel="Filter"\>\</button\> \<input edsInputText placeholder="Filter results..." /\> \</eds-input-button\> Accessibility Button and input maintain separate focus states Ensure button has descriptive label or aria-label Tab order follows visual layout Notes Default position is end (right in LTR) When edsButtonPositionStart is true, it overrides end positioning Works with all button variants (edsButton, edsIconButton) Commonly used for search, clear, and submit actions
+Description: A layout component that positions button elements relative to input fields. Enables the creation of input groups with leading or trailing action buttons, commonly used for search inputs, password visibility toggles, or clear actions. Button at end of input (default) Example : \<eds-input-button\> \<input edsInputText placeholder="Search..." /\> \<button edsButton\>Search\</button\> \</eds-input-button\> Button at start of input Example : \<eds-input-button \[edsButtonPositionStart\]="true"\> \<button edsIconButton icon="filter" ariaLabel="Filter"\>\</button\> \<input edsInputText placeholder="Filter results..." /\> \</eds-input-button\> Focus model (roving tabindex) Tab moves focus directly onto the input field (the primary control); the focus ring covers the whole host (the group). Tab again leaves the group. ArrowLeft / ArrowRight rove focus between the group's controls in visual order — the input, the clearable "✕" icon (when present), and the button — wrapping at the ends; Home / End jump to the first / last control. Only the active control is in the tab order, so Tab leaves the group from wherever focus currently is. Focusing a child directly (click) adopts it as the active roving target. Accessibility Single tab stop with arrow-key navigation between the controls The clearable icon participates in the arrow-key cycle when it is shown Ensure button has a descriptive label or aria-label Tab order follows visual layout Notes Default position is end (right in LTR) When edsButtonPositionStart is true, it overrides end positioning Works with all button variants (edsButton, edsIconButton) Commonly used for search, clear, and submit actions
 
 Inputs:
 - `e2eAttr: string = 'eds-input-button'` — Data attribute value for end-to-end testing identification. Applied as data-e2e attribute on the host element. 'eds-input-button'

package/docs/properties.html

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

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

@@ -12,14 +12,14 @@ class EdsAvatarBadge {
         this.isPositionBottom = input(false, { ...(ngDevMode ? { debugName: "isPositionBottom" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAvatarBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsAvatarBadge, isStandalone: true, selector: "eds-avatar-badge", inputs: { isPositionBottom: { classPropertyName: "isPositionBottom", publicName: "isPositionBottom", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.position": "isPositionBottom() ? \"bottom\" : \"top\"" }, classAttribute: "eds-avatar-badge" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eds-avatar :host{position:absolute;display:inline-flex}.eds-avatar :host,.eds-avatar[size=m] :host{left:var(--eds-si-xl);top:var(--eds-si-xl)}.eds-avatar[size=\"2xs\"] :host{left:var(--eds-si-xs);top:var(--eds-si-xs)}.eds-avatar[size=xs] :host{left:var(--eds-si-m);top:var(--eds-si-m)}.eds-avatar[size=s] :host{left:var(--eds-si-l);top:var(--eds-si-l)}.eds-avatar[size=l] :host{left:var(--eds-si-2xl);top:var(--eds-si-2xl)}.eds-avatar[size=xl] :host{left:var(--eds-si-4xl);top:var(--eds-si-4xl)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsAvatarBadge, isStandalone: true, selector: "eds-avatar-badge", inputs: { isPositionBottom: { classPropertyName: "isPositionBottom", publicName: "isPositionBottom", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.position": "isPositionBottom() ? \"bottom\" : \"top\"" }, classAttribute: "eds-avatar-badge" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [":host{position:absolute;right:0;bottom:0;display:inline-flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAvatarBadge, decorators: [{
             type: Component,
             args: [{ selector: 'eds-avatar-badge', template: '<ng-content/>', host: {
                         class: 'eds-avatar-badge',
                         '[attr.position]': 'isPositionBottom() ? "bottom" : "top"',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eds-avatar :host{position:absolute;display:inline-flex}.eds-avatar :host,.eds-avatar[size=m] :host{left:var(--eds-si-xl);top:var(--eds-si-xl)}.eds-avatar[size=\"2xs\"] :host{left:var(--eds-si-xs);top:var(--eds-si-xs)}.eds-avatar[size=xs] :host{left:var(--eds-si-m);top:var(--eds-si-m)}.eds-avatar[size=s] :host{left:var(--eds-si-l);top:var(--eds-si-l)}.eds-avatar[size=l] :host{left:var(--eds-si-2xl);top:var(--eds-si-2xl)}.eds-avatar[size=xl] :host{left:var(--eds-si-4xl);top:var(--eds-si-4xl)}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:absolute;right:0;bottom:0;display:inline-flex}\n"] }]
         }], propDecorators: { isPositionBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPositionBottom", required: false }] }] } });
 
 class EdsAvatarIcon {
@@ -51,7 +51,7 @@ class EdsAvatarImage {
         this.imageUrlGenerated = 'assets';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAvatarImage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsAvatarImage, isStandalone: true, selector: "eds-avatar-image", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.default": "isDefault() || null" }, classAttribute: "eds-avatar-image" }, ngImport: i0, template: "@if (imageUrl()) {\n    <div class=\"eds-avatar-image-wrapper\">\n        <img [src]=\"imageUrl()\" alt=\"Avatar\"/>\n    </div>\n} @else {\n    <eds-icon icon=\"user:core\" color=\"neutral\"/>\n}\n", styles: [".eds-avatar :host.eds-avatar-image .eds-avatar-image-wrapper{background-size:cover;height:var(--_size);width:var(--_size)}.eds-avatar :host.eds-avatar-image .eds-avatar-image-wrapper img{border-radius:var(--eds-br-full);height:var(--_size);width:var(--_size)}.eds-avatar :host.eds-avatar-image ::ng-deep .eds-icon-svg svg{height:var(--_size);width:var(--_size)}.eds-avatar :host.eds-avatar-image[default]{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsAvatarImage, isStandalone: true, selector: "eds-avatar-image", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.default": "isDefault() || null" }, classAttribute: "eds-avatar-image" }, ngImport: i0, template: "@if (imageUrl()) {\n    <div class=\"eds-avatar-image-wrapper\">\n        <img [src]=\"imageUrl()\" alt=\"Avatar\"/>\n    </div>\n} @else {\n    <eds-icon icon=\"user:core\" color=\"neutral\"/>\n}\n", styles: [".eds-avatar :host.eds-avatar-image .eds-avatar-image-wrapper{display:flex;background-size:cover;height:var(--_size);width:var(--_size)}.eds-avatar :host.eds-avatar-image .eds-avatar-image-wrapper img{border-radius:var(--eds-br-full);height:var(--_size);width:var(--_size)}.eds-avatar :host.eds-avatar-image{--_icon-size: var(--_size)}.eds-avatar :host.eds-avatar-image[default]{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAvatarImage, decorators: [{
             type: Component,
@@ -60,7 +60,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                     ], host: {
                         class: 'eds-avatar-image',
                         '[attr.default]': 'isDefault() || null',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (imageUrl()) {\n    <div class=\"eds-avatar-image-wrapper\">\n        <img [src]=\"imageUrl()\" alt=\"Avatar\"/>\n    </div>\n} @else {\n    <eds-icon icon=\"user:core\" color=\"neutral\"/>\n}\n", styles: [".eds-avatar :host.eds-avatar-image .eds-avatar-image-wrapper{background-size:cover;height:var(--_size);width:var(--_size)}.eds-avatar :host.eds-avatar-image .eds-avatar-image-wrapper img{border-radius:var(--eds-br-full);height:var(--_size);width:var(--_size)}.eds-avatar :host.eds-avatar-image ::ng-deep .eds-icon-svg svg{height:var(--_size);width:var(--_size)}.eds-avatar :host.eds-avatar-image[default]{display:flex;align-items:center;justify-content:center}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (imageUrl()) {\n    <div class=\"eds-avatar-image-wrapper\">\n        <img [src]=\"imageUrl()\" alt=\"Avatar\"/>\n    </div>\n} @else {\n    <eds-icon icon=\"user:core\" color=\"neutral\"/>\n}\n", styles: [".eds-avatar :host.eds-avatar-image .eds-avatar-image-wrapper{display:flex;background-size:cover;height:var(--_size);width:var(--_size)}.eds-avatar :host.eds-avatar-image .eds-avatar-image-wrapper img{border-radius:var(--eds-br-full);height:var(--_size);width:var(--_size)}.eds-avatar :host.eds-avatar-image{--_icon-size: var(--_size)}.eds-avatar :host.eds-avatar-image[default]{display:flex;align-items:center;justify-content:center}\n"] }]
         }], propDecorators: { imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }] } });
 
 class EdsAvatarContent {
@@ -154,7 +154,7 @@ class EdsAvatar {
         ...(ngDevMode ? [{ debugName: "hasImage" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EdsAvatar, isStandalone: true, selector: "div[edsAvatar], span[edsAvatar], eds-avatar", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "attr.size": "size()", "attr.color": "color() || null", "attr.image": "hasImage() || null", "attr.data-e2e": "e2eAttr()", "attr.aria-label": "ariaLabel()" }, classAttribute: "eds-avatar" }, queries: [{ propertyName: "avatarImage", first: true, predicate: EdsAvatarImage, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"eds-avatar-wrapper\">\n    <ng-content select=\"eds-avatar-icon\"/>\n    <ng-content select=\"eds-avatar-text\"/>\n    <ng-content select=\"eds-avatar-image\"/>\n    <ng-content select=\"eds-avatar-badge\"/>\n</div>\n\n<ng-content select=\"eds-avatar-content\"/>\n", styles: [":host{--_surface: var(--eds-c-surface-neutral-subtler);--_on-surface: var(--eds-c-on-surface-neutral-subtler);--_size: var(--eds-si-4xl);--_icon-size: var(--eds-is-m);--_font-size: var(--eds-f-s-xl);display:inline-flex;position:relative;align-items:center;gap:var(--eds-sp-s);border-radius:var(--eds-br-full)}:host .eds-avatar-wrapper{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--eds-br-full);background-color:var(--_surface);color:var(--_on-surface);height:var(--_size);width:var(--_size);position:relative}:host([size=\"2xs\"]){--_size: var(--eds-si-m);--_icon-size: var(--eds-is-2xs);--_font-size: var(--eds-f-s-xs)}:host([size=xs]){--_size: var(--eds-si-xl);--_icon-size: var(--eds-is-xs);--_font-size: var(--eds-f-s-s)}:host([size=s]){--_size: var(--eds-si-3xl);--_icon-size: var(--eds-is-s);--_font-size: var(--eds-f-s-l)}:host([size=m]){--_size: var(--eds-si-4xl);--_icon-size: var(--eds-is-m);--_font-size: var(--eds-f-s-xl)}:host([size=l]){--_size: var(--eds-si-6xl);--_icon-size: var(--eds-is-l);--_font-size: var(--eds-f-s-2xl)}:host([size=xl]){--_size: var(--eds-si-9xl);--_icon-size: var(--eds-is-xl);--_font-size: var(--eds-f-s-4xl)}:host([color=cm-blue-navy]){--_surface: var(--eds-c-surface-cm-blue-navy-subtler);--_on-surface: var(--eds-c-on-surface-cm-blue-navy-subtler)}:host([color=cm-blue-electric]){--_surface: var(--eds-c-surface-cm-blue-electric-subtler);--_on-surface: var(--eds-c-on-surface-cm-blue-electric-subtler)}:host([color=cm-green]){--_surface: var(--eds-c-surface-cm-green-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-subtler)}:host([color=cm-green-dark]){--_surface: var(--eds-c-surface-cm-green-dark-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-dark-subtler)}:host([color=cm-orange]){--_surface: var(--eds-c-surface-cm-orange-subtler);--_on-surface: var(--eds-c-on-surface-cm-orange-subtler)}:host([color=cm-purple]){--_surface: var(--eds-c-surface-cm-purple-subtler);--_on-surface: var(--eds-c-on-surface-cm-purple-subtler)}:host([color=cm-blue-ocean]){--_surface: var(--eds-c-surface-cm-blue-ocean-subtler);--_on-surface: var(--eds-c-on-surface-cm-blue-ocean-subtler)}:host([color=cm-green-lemon]){--_surface: var(--eds-c-surface-cm-green-lemon-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-lemon-subtler)}:host([color=cm-green-pine]){--_surface: var(--eds-c-surface-cm-green-pine-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-pine-subtler)}:host([color=cm-red-crayola]){--_surface: var(--eds-c-surface-cm-red-crayola-subtler);--_on-surface: var(--eds-c-on-surface-cm-red-crayola-subtler)}:host([color=cm-warm-grey]){--_surface: var(--eds-c-surface-cm-warm-grey-subtler);--_on-surface: var(--eds-c-on-surface-cm-warm-grey-subtler)}:host([color=cm-yellow-gold]){--_surface: var(--eds-c-surface-cm-yellow-gold-subtler);--_on-surface: var(--eds-c-on-surface-cm-yellow-gold-subtler)}:host([color=cm-orange-abricot]){--_surface: var(--eds-c-surface-cm-orange-abricot-subtler);--_on-surface: var(--eds-c-on-surface-cm-orange-abricot-subtler)}:host([color=cm-purple-violet]){--_surface: var(--eds-c-surface-cm-purple-violet-subtler);--_on-surface: var(--eds-c-on-surface-cm-purple-violet-subtler)}:host([color=cm-red-tomato]){--_surface: var(--eds-c-surface-cm-red-tomato-subtler);--_on-surface: var(--eds-c-on-surface-cm-red-tomato-subtler)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EdsAvatar, isStandalone: true, selector: "div[edsAvatar], span[edsAvatar], eds-avatar", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "attr.size": "size()", "attr.color": "color() || null", "attr.image": "hasImage() || null", "attr.data-e2e": "e2eAttr()", "attr.aria-label": "ariaLabel()" }, classAttribute: "eds-avatar" }, queries: [{ propertyName: "avatarImage", first: true, predicate: EdsAvatarImage, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"eds-avatar-wrapper\">\n    <ng-content select=\"eds-avatar-icon\"/>\n    <ng-content select=\"eds-avatar-text\"/>\n    <ng-content select=\"eds-avatar-image\"/>\n    <ng-content select=\"eds-avatar-badge\"/>\n</div>\n\n<ng-content select=\"eds-avatar-content\"/>\n", styles: [":host{--_surface: var(--eds-c-surface-neutral-subtler);--_on-surface: var(--eds-c-on-surface-neutral-subtler);--_size: var(--eds-si-4xl);--_icon-size: var(--eds-is-m);--_font-size: var(--eds-f-s-xl);--_eds-avatar-badge-size: var(--eds-sp-m);--_eds-avatar-badge-icon-size: var(--eds-is-2xs);--_eds-avatar-badge-ring-width: var(--eds-bw-s);--_eds-badge-empty-size: var(--_eds-avatar-badge-size);display:inline-flex;position:relative;align-items:center;gap:var(--eds-sp-s);outline:var(--eds-bw-s) solid var(--eds-c-border-inverted);outline-offset:-1px;border-radius:var(--eds-br-full)}:host .eds-avatar-wrapper{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--eds-br-full);background-color:var(--_surface);color:var(--_on-surface);height:var(--_size);width:var(--_size);position:relative}:host([size=\"2xs\"]){--_size: var(--eds-si-m);--_icon-size: var(--eds-is-2xs);--_font-size: var(--eds-f-s-xs);--_eds-avatar-badge-size: var(--eds-sp-xs)}:host([size=xs]){--_size: var(--eds-si-xl);--_icon-size: var(--eds-is-xs);--_font-size: var(--eds-f-s-s);--_eds-avatar-badge-size: var(--eds-sp-xs)}:host([size=s]){--_size: var(--eds-si-3xl);--_icon-size: var(--eds-is-s);--_font-size: var(--eds-f-s-l);--_eds-avatar-badge-size: var(--eds-sp-s);--_eds-avatar-badge-icon-size: var(--eds-is-3xs)}:host([size=m]){--_size: var(--eds-si-4xl);--_icon-size: var(--eds-is-s);--_font-size: var(--eds-f-s-xl);--_eds-avatar-badge-size: var(--eds-sp-m);--_eds-avatar-badge-icon-size: var(--eds-is-2xs)}:host([size=l]){--_size: var(--eds-si-6xl);--_icon-size: var(--eds-is-l);--_font-size: var(--eds-f-s-2xl);--_eds-avatar-badge-size: var(--eds-sp-l);--_eds-avatar-badge-icon-size: var(--eds-is-2xs)}:host([size=xl]){--_size: var(--eds-si-9xl);--_icon-size: var(--eds-is-xl);--_font-size: var(--eds-f-s-4xl);--_eds-avatar-badge-size: var(--eds-sp-xl);--_eds-avatar-badge-icon-size: var(--eds-is-xs)}:host([size=\"2xs\"]),:host([size=xs]){--_eds-avatar-badge-ring-width: var(--eds-bw-xs);--_eds-avatar-badge-icon-size: 0px}:host([color=cm-blue-navy]){--_surface: var(--eds-c-surface-cm-blue-navy-subtler);--_on-surface: var(--eds-c-on-surface-cm-blue-navy-subtler)}:host([color=cm-blue-electric]){--_surface: var(--eds-c-surface-cm-blue-electric-subtler);--_on-surface: var(--eds-c-on-surface-cm-blue-electric-subtler)}:host([color=cm-green]){--_surface: var(--eds-c-surface-cm-green-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-subtler)}:host([color=cm-green-dark]){--_surface: var(--eds-c-surface-cm-green-dark-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-dark-subtler)}:host([color=cm-orange]){--_surface: var(--eds-c-surface-cm-orange-subtler);--_on-surface: var(--eds-c-on-surface-cm-orange-subtler)}:host([color=cm-purple]){--_surface: var(--eds-c-surface-cm-purple-subtler);--_on-surface: var(--eds-c-on-surface-cm-purple-subtler)}:host([color=cm-blue-ocean]){--_surface: var(--eds-c-surface-cm-blue-ocean-subtler);--_on-surface: var(--eds-c-on-surface-cm-blue-ocean-subtler)}:host([color=cm-green-lemon]){--_surface: var(--eds-c-surface-cm-green-lemon-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-lemon-subtler)}:host([color=cm-green-pine]){--_surface: var(--eds-c-surface-cm-green-pine-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-pine-subtler)}:host([color=cm-red-crayola]){--_surface: var(--eds-c-surface-cm-red-crayola-subtler);--_on-surface: var(--eds-c-on-surface-cm-red-crayola-subtler)}:host([color=cm-warm-grey]){--_surface: var(--eds-c-surface-cm-warm-grey-subtler);--_on-surface: var(--eds-c-on-surface-cm-warm-grey-subtler)}:host([color=cm-yellow-gold]){--_surface: var(--eds-c-surface-cm-yellow-gold-subtler);--_on-surface: var(--eds-c-on-surface-cm-yellow-gold-subtler)}:host([color=cm-orange-abricot]){--_surface: var(--eds-c-surface-cm-orange-abricot-subtler);--_on-surface: var(--eds-c-on-surface-cm-orange-abricot-subtler)}:host([color=cm-purple-violet]){--_surface: var(--eds-c-surface-cm-purple-violet-subtler);--_on-surface: var(--eds-c-on-surface-cm-purple-violet-subtler)}:host([color=cm-red-tomato]){--_surface: var(--eds-c-surface-cm-red-tomato-subtler);--_on-surface: var(--eds-c-on-surface-cm-red-tomato-subtler)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAvatar, decorators: [{
             type: Component,
@@ -166,7 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '[attr.image]': 'hasImage() || null',
                         '[attr.data-e2e]': 'e2eAttr()',
                         '[attr.aria-label]': 'ariaLabel()',
-                    }, template: "<div class=\"eds-avatar-wrapper\">\n    <ng-content select=\"eds-avatar-icon\"/>\n    <ng-content select=\"eds-avatar-text\"/>\n    <ng-content select=\"eds-avatar-image\"/>\n    <ng-content select=\"eds-avatar-badge\"/>\n</div>\n\n<ng-content select=\"eds-avatar-content\"/>\n", styles: [":host{--_surface: var(--eds-c-surface-neutral-subtler);--_on-surface: var(--eds-c-on-surface-neutral-subtler);--_size: var(--eds-si-4xl);--_icon-size: var(--eds-is-m);--_font-size: var(--eds-f-s-xl);display:inline-flex;position:relative;align-items:center;gap:var(--eds-sp-s);border-radius:var(--eds-br-full)}:host .eds-avatar-wrapper{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--eds-br-full);background-color:var(--_surface);color:var(--_on-surface);height:var(--_size);width:var(--_size);position:relative}:host([size=\"2xs\"]){--_size: var(--eds-si-m);--_icon-size: var(--eds-is-2xs);--_font-size: var(--eds-f-s-xs)}:host([size=xs]){--_size: var(--eds-si-xl);--_icon-size: var(--eds-is-xs);--_font-size: var(--eds-f-s-s)}:host([size=s]){--_size: var(--eds-si-3xl);--_icon-size: var(--eds-is-s);--_font-size: var(--eds-f-s-l)}:host([size=m]){--_size: var(--eds-si-4xl);--_icon-size: var(--eds-is-m);--_font-size: var(--eds-f-s-xl)}:host([size=l]){--_size: var(--eds-si-6xl);--_icon-size: var(--eds-is-l);--_font-size: var(--eds-f-s-2xl)}:host([size=xl]){--_size: var(--eds-si-9xl);--_icon-size: var(--eds-is-xl);--_font-size: var(--eds-f-s-4xl)}:host([color=cm-blue-navy]){--_surface: var(--eds-c-surface-cm-blue-navy-subtler);--_on-surface: var(--eds-c-on-surface-cm-blue-navy-subtler)}:host([color=cm-blue-electric]){--_surface: var(--eds-c-surface-cm-blue-electric-subtler);--_on-surface: var(--eds-c-on-surface-cm-blue-electric-subtler)}:host([color=cm-green]){--_surface: var(--eds-c-surface-cm-green-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-subtler)}:host([color=cm-green-dark]){--_surface: var(--eds-c-surface-cm-green-dark-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-dark-subtler)}:host([color=cm-orange]){--_surface: var(--eds-c-surface-cm-orange-subtler);--_on-surface: var(--eds-c-on-surface-cm-orange-subtler)}:host([color=cm-purple]){--_surface: var(--eds-c-surface-cm-purple-subtler);--_on-surface: var(--eds-c-on-surface-cm-purple-subtler)}:host([color=cm-blue-ocean]){--_surface: var(--eds-c-surface-cm-blue-ocean-subtler);--_on-surface: var(--eds-c-on-surface-cm-blue-ocean-subtler)}:host([color=cm-green-lemon]){--_surface: var(--eds-c-surface-cm-green-lemon-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-lemon-subtler)}:host([color=cm-green-pine]){--_surface: var(--eds-c-surface-cm-green-pine-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-pine-subtler)}:host([color=cm-red-crayola]){--_surface: var(--eds-c-surface-cm-red-crayola-subtler);--_on-surface: var(--eds-c-on-surface-cm-red-crayola-subtler)}:host([color=cm-warm-grey]){--_surface: var(--eds-c-surface-cm-warm-grey-subtler);--_on-surface: var(--eds-c-on-surface-cm-warm-grey-subtler)}:host([color=cm-yellow-gold]){--_surface: var(--eds-c-surface-cm-yellow-gold-subtler);--_on-surface: var(--eds-c-on-surface-cm-yellow-gold-subtler)}:host([color=cm-orange-abricot]){--_surface: var(--eds-c-surface-cm-orange-abricot-subtler);--_on-surface: var(--eds-c-on-surface-cm-orange-abricot-subtler)}:host([color=cm-purple-violet]){--_surface: var(--eds-c-surface-cm-purple-violet-subtler);--_on-surface: var(--eds-c-on-surface-cm-purple-violet-subtler)}:host([color=cm-red-tomato]){--_surface: var(--eds-c-surface-cm-red-tomato-subtler);--_on-surface: var(--eds-c-on-surface-cm-red-tomato-subtler)}\n"] }]
+                    }, template: "<div class=\"eds-avatar-wrapper\">\n    <ng-content select=\"eds-avatar-icon\"/>\n    <ng-content select=\"eds-avatar-text\"/>\n    <ng-content select=\"eds-avatar-image\"/>\n    <ng-content select=\"eds-avatar-badge\"/>\n</div>\n\n<ng-content select=\"eds-avatar-content\"/>\n", styles: [":host{--_surface: var(--eds-c-surface-neutral-subtler);--_on-surface: var(--eds-c-on-surface-neutral-subtler);--_size: var(--eds-si-4xl);--_icon-size: var(--eds-is-m);--_font-size: var(--eds-f-s-xl);--_eds-avatar-badge-size: var(--eds-sp-m);--_eds-avatar-badge-icon-size: var(--eds-is-2xs);--_eds-avatar-badge-ring-width: var(--eds-bw-s);--_eds-badge-empty-size: var(--_eds-avatar-badge-size);display:inline-flex;position:relative;align-items:center;gap:var(--eds-sp-s);outline:var(--eds-bw-s) solid var(--eds-c-border-inverted);outline-offset:-1px;border-radius:var(--eds-br-full)}:host .eds-avatar-wrapper{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--eds-br-full);background-color:var(--_surface);color:var(--_on-surface);height:var(--_size);width:var(--_size);position:relative}:host([size=\"2xs\"]){--_size: var(--eds-si-m);--_icon-size: var(--eds-is-2xs);--_font-size: var(--eds-f-s-xs);--_eds-avatar-badge-size: var(--eds-sp-xs)}:host([size=xs]){--_size: var(--eds-si-xl);--_icon-size: var(--eds-is-xs);--_font-size: var(--eds-f-s-s);--_eds-avatar-badge-size: var(--eds-sp-xs)}:host([size=s]){--_size: var(--eds-si-3xl);--_icon-size: var(--eds-is-s);--_font-size: var(--eds-f-s-l);--_eds-avatar-badge-size: var(--eds-sp-s);--_eds-avatar-badge-icon-size: var(--eds-is-3xs)}:host([size=m]){--_size: var(--eds-si-4xl);--_icon-size: var(--eds-is-s);--_font-size: var(--eds-f-s-xl);--_eds-avatar-badge-size: var(--eds-sp-m);--_eds-avatar-badge-icon-size: var(--eds-is-2xs)}:host([size=l]){--_size: var(--eds-si-6xl);--_icon-size: var(--eds-is-l);--_font-size: var(--eds-f-s-2xl);--_eds-avatar-badge-size: var(--eds-sp-l);--_eds-avatar-badge-icon-size: var(--eds-is-2xs)}:host([size=xl]){--_size: var(--eds-si-9xl);--_icon-size: var(--eds-is-xl);--_font-size: var(--eds-f-s-4xl);--_eds-avatar-badge-size: var(--eds-sp-xl);--_eds-avatar-badge-icon-size: var(--eds-is-xs)}:host([size=\"2xs\"]),:host([size=xs]){--_eds-avatar-badge-ring-width: var(--eds-bw-xs);--_eds-avatar-badge-icon-size: 0px}:host([color=cm-blue-navy]){--_surface: var(--eds-c-surface-cm-blue-navy-subtler);--_on-surface: var(--eds-c-on-surface-cm-blue-navy-subtler)}:host([color=cm-blue-electric]){--_surface: var(--eds-c-surface-cm-blue-electric-subtler);--_on-surface: var(--eds-c-on-surface-cm-blue-electric-subtler)}:host([color=cm-green]){--_surface: var(--eds-c-surface-cm-green-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-subtler)}:host([color=cm-green-dark]){--_surface: var(--eds-c-surface-cm-green-dark-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-dark-subtler)}:host([color=cm-orange]){--_surface: var(--eds-c-surface-cm-orange-subtler);--_on-surface: var(--eds-c-on-surface-cm-orange-subtler)}:host([color=cm-purple]){--_surface: var(--eds-c-surface-cm-purple-subtler);--_on-surface: var(--eds-c-on-surface-cm-purple-subtler)}:host([color=cm-blue-ocean]){--_surface: var(--eds-c-surface-cm-blue-ocean-subtler);--_on-surface: var(--eds-c-on-surface-cm-blue-ocean-subtler)}:host([color=cm-green-lemon]){--_surface: var(--eds-c-surface-cm-green-lemon-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-lemon-subtler)}:host([color=cm-green-pine]){--_surface: var(--eds-c-surface-cm-green-pine-subtler);--_on-surface: var(--eds-c-on-surface-cm-green-pine-subtler)}:host([color=cm-red-crayola]){--_surface: var(--eds-c-surface-cm-red-crayola-subtler);--_on-surface: var(--eds-c-on-surface-cm-red-crayola-subtler)}:host([color=cm-warm-grey]){--_surface: var(--eds-c-surface-cm-warm-grey-subtler);--_on-surface: var(--eds-c-on-surface-cm-warm-grey-subtler)}:host([color=cm-yellow-gold]){--_surface: var(--eds-c-surface-cm-yellow-gold-subtler);--_on-surface: var(--eds-c-on-surface-cm-yellow-gold-subtler)}:host([color=cm-orange-abricot]){--_surface: var(--eds-c-surface-cm-orange-abricot-subtler);--_on-surface: var(--eds-c-on-surface-cm-orange-abricot-subtler)}:host([color=cm-purple-violet]){--_surface: var(--eds-c-surface-cm-purple-violet-subtler);--_on-surface: var(--eds-c-on-surface-cm-purple-violet-subtler)}:host([color=cm-red-tomato]){--_surface: var(--eds-c-surface-cm-red-tomato-subtler);--_on-surface: var(--eds-c-on-surface-cm-red-tomato-subtler)}\n"] }]
         }], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], avatarImage: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EdsAvatarImage), { isSignal: true }] }] } });
 
 const EDS_AVATAR = [