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

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-09-25T21:29:34.549Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-09-27T12:18:02.375Z, llm-md export.
 
 ## Components
 
@@ -1937,12 +1937,12 @@ File: `packages/eds/eds-label/eds-label.ts`
 Selector: `label[edsLabel], span[edsLabel], div[edsLabel]`
 Change detection: `ChangeDetectionStrategy.OnPush`
 
+Description: A form label applied to label , span , or div elements via the edsLabel attribute. Supports a semantic color ( neutral default, critical for errors) reflected as a host attribute, plus a required marker. Usage: Example : \<label edsLabel for="name"\>Name\</label\> \<label edsLabel edsRequired for="email"\>Email\</label\> \<span edsLabel color="critical"\>This field is required\</span\>
+
 Inputs:
+- `color: EdsLabelColor = 'neutral'` — Semantic color of the label. 'neutral'
 - `edsRequired: boolean = false` — Marks the label as required (appends a red asterisk). false
 
-Properties:
-- `hostClasses: unknown = computed(() => { const colorClass = this.colorDirective.getCssClass('eds-label'); return [ 'eds-label', colorClass || 'eds-label--neutral', this.edsRequired() ?…` — Computed host CSS classes based on current state.
-
 ### EdsLanguageSelector
 
 File: `packages/eds/eds-language-selector/eds-language-selector.ts`
@@ -2252,6 +2252,7 @@ Change detection: `ChangeDetectionStrategy.OnPush`
 
 Inputs:
 - `fixedWidth: string = ''` — Fixed width value (overrides responsive width).
+- `hasBackdrop: boolean = false` — Shows a dimmed backdrop behind the overlay panel. Off by default.
 - `hasClosedOnClickOutside: boolean = false` — Enables automatic closing when clicking outside the overlay.
 - `isActive: boolean = false` — Controls the visibility and active state of the overlay.
 - `isHighlighted: boolean = false` — Applies highlighted visual styling.
@@ -5006,7 +5007,7 @@ Properties:
 - `type EdsButtonSize = "s" | "m" | "l"` — Sizes the button styles (SCSS :host(\[size="…"\]) branches).
 - `type EdsButtonType = "primary" | "secondary" | "tertiary"` — Local narrowed unions — the button's variant contract. No shared-token import.
 - `type EdsChartType = "line" | "area" | "bar" | "stacked-bar" | "horizontal-bar" | "pie" | "radar" | "heatmap" | "treemap" | "funnel" | "waterfall"` — Chart type variants.
-- `type EdsChipColor = "neutral" | "info" | "success" | "warning" | "critical"` — Local narrowed color union — the chip's color contract.
+- `type EdsChipColor = "neutral" | "primary" | "info" | "success" | "warning" | "critical"` — Local narrowed color union — the chip's color contract.
 - `type EdsChipSize = "s" | "m" | "l"` — Local narrowed size union — the chip's size contract.
 - `type EdsColorToken = "primary" | "brand" | "neutral" | "neutral-subtle" | "neutral-subtler" | "highlight" | "info" | "success" | "warning" | "critical" | "disabled"` — Supported color tokens across EDS components.
 - `type EdsDialogVerticalPosition = "top" | "center" | "bottom"`
@@ -5034,6 +5035,7 @@ Properties:
 - `type EdsIconStateSize = "2xs" | "xs" | "s" | "m" | "l" | "xl"` — Local narrowed size union — the icon-state's size contract.
 - `type EdsInputPromptSendPosition = "toolbar" | "top"` — Placement options for the built-in send button.
 - `type EdsInputPromptSize = "s" | "m" | "l"` — Local narrowed size union — the prompt input's size contract.
+- `type EdsLabelColor = "neutral" | "critical"` — Local narrowed color union — the label's color contract. neutral is the default; critical colors the label for error context.
 - `type EdsListRole = "listbox" | "menu" | "list"` — Supported ARIA roles for interactive list mode.
 - `type EdsLoadingIndicatorSize = "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl"` — Local narrowed size union — the loading indicator's size contract.
 - `type EdsOverlayPosition = "right" | "left" | "top" | "bottom"`

package/docs/miscellaneous/typealiases.html

@@ -272,6 +272,9 @@
                         <li>
                             <a href="#EdsInputPromptSize" title="packages/eds/eds-input-prompt/eds-input-prompt.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EdsInputPromptSize</b>&nbsp;&nbsp;&nbsp;(packages/.../eds-input-prompt.ts)</span></a>
                         </li>
+                        <li>
+                            <a href="#EdsLabelColor" title="packages/eds/eds-label/eds-label.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EdsLabelColor</b>&nbsp;&nbsp;&nbsp;(packages/.../eds-label.ts)</span></a>
+                        </li>
                         <li>
                             <a href="#EdsListRole" title="packages/eds/eds-list/eds-list.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EdsListRole</b>&nbsp;&nbsp;&nbsp;(packages/.../eds-list.ts)</span></a>
                         </li>
@@ -907,7 +910,7 @@ SCSS branches; <code>warning</code> is accepted for parity but has no styled bra
             </tr>
             <tr>
                 <td class="col-md-4">
-                    <code>    <code>&quot;neutral&quot; | &quot;info&quot; | &quot;success&quot; | &quot;warning&quot; | &quot;critical&quot;</code>
+                    <code>    <code>&quot;neutral&quot; | &quot;primary&quot; | &quot;info&quot; | &quot;success&quot; | &quot;warning&quot; | &quot;critical&quot;</code>
 </code>
                 </td>
             </tr>
@@ -1548,6 +1551,32 @@ Each value maps to a specific status icon.</p>
             </tr>
         </tbody>
     </table>
+</section>
+    <h3>packages/eds/eds-label/eds-label.ts</h3>
+    <section data-compodoc="block-typealias">
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EdsLabelColor"></a>
+                    <span class="name "><b>EdsLabelColor</b><a href="#EdsLabelColor"><span class="icon ion-ios-link"></span></a></span>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Local narrowed color union — the label&#39;s color contract.
+<code>neutral</code> is the default; <code>critical</code> colors the label for error context.</p>
+</div>
+                </td>
+            </tr>
+            <tr>
+                <td class="col-md-4">
+                    <code>    <code>&quot;neutral&quot; | &quot;critical&quot;</code>
+</code>
+                </td>
+            </tr>
+        </tbody>
+    </table>
 </section>
     <h3>packages/eds/eds-list/eds-list.ts</h3>
     <section data-compodoc="block-typealias">

package/docs/properties.html

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"eui-eds-eds-chip.mjs","sources":["../../eds-chip/eds-chip.ts","../../eds-chip/eds-chip.html","../../eds-chip/models/eui-chip.model.ts","../../eds-chip/index.ts","../../eds-chip/eui-eds-eds-chip.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    booleanAttribute,\n    inject,\n    input,\n    output,\n    computed,\n} from '@angular/core';\n\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\nimport { EdsChipList } from '@eui/eds/eds-chip-list';\n\nimport { EdsChipData } from './models/eui-chip.model';\nimport { EdsIconSize } from '@eui/eds/eds-icon';\n\n/**\n * Local narrowed color union — the chip's color contract.\n */\nexport type EdsChipColor = 'neutral' | 'info' | 'success' | 'warning' | 'critical';\n\n/**\n * Local narrowed size union — the chip's size contract.\n */\nexport type EdsChipSize = 's' | 'm' | 'l';\n\n/** Maps a chip size to the size of its inner (remove) icon. */\nconst CHIP_ICON_SIZE: Record<EdsChipSize, EdsIconSize> = {\n    s: 'xs',\n    m: 's',\n    l: 'm',\n};\n\n@Component({\n    templateUrl: './eds-chip.html',\n    selector: 'eds-chip, span[edsChip], li[edsChip]',\n    styleUrl: './eds-chip.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        ...EDS_ICON,\n        ...EDS_ICON_BUTTON,\n        ...EDS_BUTTON,\n    ],\n    host: {\n        class: 'eds-chip',\n        '[attr.color]': 'color()',\n        '[attr.size]': 'size()',\n        '[attr.removable]': 'isRemovable() || null',\n        '[attr.active]': 'isActive() || null',\n        '[attr.disabled]': 'disabled() || null',\n        '[attr.tabindex]': 'disabled() ? \"-1\" : \"0\"',\n        '[attr.role]': 'hostRole()',\n        '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n        '[attr.aria-pressed]': 'isActive() ? \"true\" : null',\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '(click)': 'onHostClick($event)',\n        '(keydown.enter)': 'onHostClick($event)',\n        '(keydown.space)': 'onHostKeyActivate($event)',\n        '(keydown.delete)': 'onKeyRemove($event)',\n        '(keydown.backspace)': 'onKeyRemove($event)',\n    },\n})\nexport class EdsChip {\n    /**\n     * Semantic color of the chip.\n     * @default 'neutral'\n     */\n    color = input<EdsChipColor>('neutral');\n\n    /**\n     * Size of the chip.\n     * @default 'm'\n     */\n    size = input<EdsChipSize>('m');\n\n    /** Size of the inner remove icon, derived from the chip size. */\n    protected iconSize = computed<EdsIconSize>(() => CHIP_ICON_SIZE[this.size()]);\n\n    /**\n     * Sets the `aria-label` attribute for the host element.\n     * When not set, assistive technology will use the text content of the chip.\n     *\n     * @default undefined\n     */\n    ariaLabel = input<string | undefined>(undefined);\n\n    /**\n     * Resolved role for the host element.\n     * Returns 'listitem' when inside an eds-chip-list, 'button' otherwise.\n     */\n    protected hostRole = computed(() => this.chipList ? 'listitem' : 'button');\n\n    /**\n     * Sets the `data-e2e` attribute for the host element.\n     *\n     * @default 'eds-chip'\n     */\n    e2eAttr = input('eds-chip');\n\n    /**\n     * Sets the edsInternalId of the chip.\n     *\n     * @default ''\n     */\n    edsInternalId = input<string>('');\n\n    /**\n     * Sets the label of the tooltip to display on hover.\n     */\n    tooltipMessage = input<string>('');\n\n    /**\n     * Sets the id of the chip.\n     */\n    id = input<string | number>('');\n\n    /**\n     * Sets the data of the chip like tooltip configuration.\n     */\n    data = input<EdsChipData>({\n        id: crypto.randomUUID(),\n        tooltip: {\n            color: 'edsTooltipPrimary',\n            contentAlignment: null,\n            position: 'above',\n        },\n    });\n\n    /**\n     * Whether the chip can be removed.\n     *\n     * @default false\n     */\n    isRemovable = input(false, { transform: booleanAttribute });\n\n    /**\n     * Whether the chip is in active/pressed state.\n     *\n     * @default false\n     */\n    isActive = input(false, { transform: booleanAttribute });\n\n    /**\n     * Controls the disabled state of the chip.\n     * When true, prevents interaction and applies disabled styling.\n     *\n     * @default false\n     */\n    disabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Event emitted when the chip is removed.\n     */\n    chipRemove = output<EdsChipData>();\n\n    /**\n     * Event emitted when the chip is clicked.\n     */\n    chipClick = output<EdsChipData>();\n\n    /** Optional parent chip-list — used to determine role. */\n    private chipList = inject(EdsChipList, { optional: true });\n\n    onHostClick(event?: Event): void {\n        if (this.disabled()) {\n            return;\n        }\n\n        if (this.isRemovable()) {\n            this.onRemove(event);\n        } else {\n            this.onClick(event);\n        }\n    }\n\n    /**\n     * Handles Space key activation — prevents page scroll and triggers click.\n     */\n    onHostKeyActivate(event: Event): void {\n        event.preventDefault();\n        this.onHostClick(event);\n    }\n\n    /**\n     * Handles Delete/Backspace key to remove chip (WAI-ARIA APG convention).\n     */\n    onKeyRemove(event: Event): void {\n        if (this.disabled() || !this.isRemovable()) {\n            return;\n        }\n        event.preventDefault();\n        this.chipRemove.emit(this.data());\n    }\n\n    /**\n     * Remove chip handler\n     *\n     * @param event Click event\n     */\n    private onRemove(event?: Event): void {\n        if (event instanceof KeyboardEvent && (event as KeyboardEvent).code === 'Backspace') {\n            this.chipRemove.emit({ ...this.data(), _event: event });\n        } else {\n            this.chipRemove.emit(this.data());\n        }\n    }\n\n    private onClick(event?: Event): void {\n        this.chipClick.emit(this.data());\n    }\n}\n","<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x:core\" [size]=\"iconSize()\"/>\n}\n","/** Data structure for chip tooltip configuration. */\nexport interface EdsChipTooltip {\n    tooltipMessage?: string;\n    position?: 'above' | 'below' | 'left' | 'right' | 'before' | 'after';\n    contentAlignment?: 'center' | 'left' | 'right' | 'justify' | null;\n    delay?: number;\n    color?: string;\n}\n\n/** Data payload emitted by chip events and passed via the `data` input. */\nexport interface EdsChipData {\n    id?: string | number;\n    tooltip?: EdsChipTooltip;\n    /** Internal event reference, present when triggered via keyboard. */\n    _event?: Event;\n    [key: string]: unknown;\n}\n\n/**\n * @deprecated Use `EdsChipData` interface instead.\n * Legacy class-based model kept for backward compatibility.\n */\nexport class EdsChipModel implements EdsChipData {\n    [key: string]: unknown;\n    id!: string | number;\n    edsInternalId!: string;\n    label!: string;\n    isRemovable = false;\n    isOutline = false;\n    isRounded = false;\n    isDisabled = false;\n    variant: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'accent' = 'primary';\n    tooltip: EdsChipTooltip = {};\n    iconClass?: string;\n    iconSvgName?: string;\n\n    constructor(values = {}) {\n        Object.assign(this, values);\n    }\n}\n","import { EdsChip } from './eds-chip';\n\nexport * from './models/eui-chip.model';\nexport * from './eds-chip';\n\nexport const EDS_CHIP = [\n    EdsChip,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-eds-eds-chip.mjs","sources":["../../eds-chip/eds-chip.ts","../../eds-chip/eds-chip.html","../../eds-chip/models/eui-chip.model.ts","../../eds-chip/index.ts","../../eds-chip/eui-eds-eds-chip.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    booleanAttribute,\n    inject,\n    input,\n    output,\n    computed,\n} from '@angular/core';\n\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\nimport { EdsChipList } from '@eui/eds/eds-chip-list';\n\nimport { EdsChipData } from './models/eui-chip.model';\nimport { EdsIconSize } from '@eui/eds/eds-icon';\n\n/**\n * Local narrowed color union — the chip's color contract.\n */\nexport type EdsChipColor = 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'critical';\n\n/**\n * Local narrowed size union — the chip's size contract.\n */\nexport type EdsChipSize = 's' | 'm' | 'l';\n\n/** Maps a chip size to the size of its inner (remove) icon. */\nconst CHIP_ICON_SIZE: Record<EdsChipSize, EdsIconSize> = {\n    s: 'xs',\n    m: 's',\n    l: 'm',\n};\n\n@Component({\n    templateUrl: './eds-chip.html',\n    selector: 'eds-chip, span[edsChip], li[edsChip]',\n    styleUrl: './eds-chip.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        ...EDS_ICON,\n        ...EDS_ICON_BUTTON,\n        ...EDS_BUTTON,\n    ],\n    host: {\n        class: 'eds-chip',\n        '[attr.color]': 'color()',\n        '[attr.size]': 'size()',\n        '[attr.removable]': 'isRemovable() || null',\n        '[attr.active]': 'isActive() || null',\n        '[attr.disabled]': 'disabled() || null',\n        '[attr.tabindex]': 'disabled() ? \"-1\" : \"0\"',\n        '[attr.role]': 'hostRole()',\n        '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n        '[attr.aria-pressed]': 'isActive() ? \"true\" : null',\n        '[attr.aria-label]': 'ariaLabel()',\n        '[attr.data-e2e]': 'e2eAttr()',\n        '(click)': 'onHostClick($event)',\n        '(keydown.enter)': 'onHostClick($event)',\n        '(keydown.space)': 'onHostKeyActivate($event)',\n        '(keydown.delete)': 'onKeyRemove($event)',\n        '(keydown.backspace)': 'onKeyRemove($event)',\n    },\n})\nexport class EdsChip {\n    /**\n     * Semantic color of the chip.\n     * @default 'neutral'\n     */\n    color = input<EdsChipColor>('neutral');\n\n    /**\n     * Size of the chip.\n     * @default 'm'\n     */\n    size = input<EdsChipSize>('m');\n\n    /** Size of the inner remove icon, derived from the chip size. */\n    protected iconSize = computed<EdsIconSize>(() => CHIP_ICON_SIZE[this.size()]);\n\n    /**\n     * Sets the `aria-label` attribute for the host element.\n     * When not set, assistive technology will use the text content of the chip.\n     *\n     * @default undefined\n     */\n    ariaLabel = input<string | undefined>(undefined);\n\n    /**\n     * Resolved role for the host element.\n     * Returns 'listitem' when inside an eds-chip-list, 'button' otherwise.\n     */\n    protected hostRole = computed(() => this.chipList ? 'listitem' : 'button');\n\n    /**\n     * Sets the `data-e2e` attribute for the host element.\n     *\n     * @default 'eds-chip'\n     */\n    e2eAttr = input('eds-chip');\n\n    /**\n     * Sets the edsInternalId of the chip.\n     *\n     * @default ''\n     */\n    edsInternalId = input<string>('');\n\n    /**\n     * Sets the label of the tooltip to display on hover.\n     */\n    tooltipMessage = input<string>('');\n\n    /**\n     * Sets the id of the chip.\n     */\n    id = input<string | number>('');\n\n    /**\n     * Sets the data of the chip like tooltip configuration.\n     */\n    data = input<EdsChipData>({\n        id: crypto.randomUUID(),\n        tooltip: {\n            color: 'edsTooltipPrimary',\n            contentAlignment: null,\n            position: 'above',\n        },\n    });\n\n    /**\n     * Whether the chip can be removed.\n     *\n     * @default false\n     */\n    isRemovable = input(false, { transform: booleanAttribute });\n\n    /**\n     * Whether the chip is in active/pressed state.\n     *\n     * @default false\n     */\n    isActive = input(false, { transform: booleanAttribute });\n\n    /**\n     * Controls the disabled state of the chip.\n     * When true, prevents interaction and applies disabled styling.\n     *\n     * @default false\n     */\n    disabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Event emitted when the chip is removed.\n     */\n    chipRemove = output<EdsChipData>();\n\n    /**\n     * Event emitted when the chip is clicked.\n     */\n    chipClick = output<EdsChipData>();\n\n    /** Optional parent chip-list — used to determine role. */\n    private chipList = inject(EdsChipList, { optional: true });\n\n    onHostClick(event?: Event): void {\n        if (this.disabled()) {\n            return;\n        }\n\n        if (this.isRemovable()) {\n            this.onRemove(event);\n        } else {\n            this.onClick(event);\n        }\n    }\n\n    /**\n     * Handles Space key activation — prevents page scroll and triggers click.\n     */\n    onHostKeyActivate(event: Event): void {\n        event.preventDefault();\n        this.onHostClick(event);\n    }\n\n    /**\n     * Handles Delete/Backspace key to remove chip (WAI-ARIA APG convention).\n     */\n    onKeyRemove(event: Event): void {\n        if (this.disabled() || !this.isRemovable()) {\n            return;\n        }\n        event.preventDefault();\n        this.chipRemove.emit(this.data());\n    }\n\n    /**\n     * Remove chip handler\n     *\n     * @param event Click event\n     */\n    private onRemove(event?: Event): void {\n        if (event instanceof KeyboardEvent && (event as KeyboardEvent).code === 'Backspace') {\n            this.chipRemove.emit({ ...this.data(), _event: event });\n        } else {\n            this.chipRemove.emit(this.data());\n        }\n    }\n\n    private onClick(event?: Event): void {\n        this.chipClick.emit(this.data());\n    }\n}\n","<div class=\"eds-chip__content\" #chipLabel>\n    <ng-content></ng-content>\n</div>\n@if (isRemovable()) {\n    <eds-icon ariaLabel=\"Remove {{ chipLabel.textContent }} chip\" icon=\"x:core\" [size]=\"iconSize()\"/>\n}\n","/** Data structure for chip tooltip configuration. */\nexport interface EdsChipTooltip {\n    tooltipMessage?: string;\n    position?: 'above' | 'below' | 'left' | 'right' | 'before' | 'after';\n    contentAlignment?: 'center' | 'left' | 'right' | 'justify' | null;\n    delay?: number;\n    color?: string;\n}\n\n/** Data payload emitted by chip events and passed via the `data` input. */\nexport interface EdsChipData {\n    id?: string | number;\n    tooltip?: EdsChipTooltip;\n    /** Internal event reference, present when triggered via keyboard. */\n    _event?: Event;\n    [key: string]: unknown;\n}\n\n/**\n * @deprecated Use `EdsChipData` interface instead.\n * Legacy class-based model kept for backward compatibility.\n */\nexport class EdsChipModel implements EdsChipData {\n    [key: string]: unknown;\n    id!: string | number;\n    edsInternalId!: string;\n    label!: string;\n    isRemovable = false;\n    isOutline = false;\n    isRounded = false;\n    isDisabled = false;\n    variant: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'accent' = 'primary';\n    tooltip: EdsChipTooltip = {};\n    iconClass?: string;\n    iconSvgName?: string;\n\n    constructor(values = {}) {\n        Object.assign(this, values);\n    }\n}\n","import { EdsChip } from './eds-chip';\n\nexport * from './models/eui-chip.model';\nexport * from './eds-chip';\n\nexport const EDS_CHIP = [\n    EdsChip,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AA4BA;AACA,MAAM,cAAc,GAAqC;AACrD,IAAA,CAAC,EAAE,IAAI;AACP,IAAA,CAAC,EAAE,GAAG;AACN,IAAA,CAAC,EAAE,GAAG;CACT;MAgCY,OAAO,CAAA;AA9BpB,IAAA,WAAA,GAAA;AA+BI;;;AAGG;QACH,IAAA,CAAA,KAAK,GAAG,KAAK,CAAe,SAAS;kFAAC;AAEtC;;;AAGG;QACH,IAAA,CAAA,IAAI,GAAG,KAAK,CAAc,GAAG;iFAAC;;AAGpB,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAc,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;qFAAC;AAE7E;;;;;AAKG;QACH,IAAA,CAAA,SAAS,GAAG,KAAK,CAAqB,SAAS;sFAAC;AAEhD;;;AAGG;AACO,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,QAAQ;qFAAC;AAE1E;;;;AAIG;QACH,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,UAAU;oFAAC;AAE3B;;;;AAIG;QACH,IAAA,CAAA,aAAa,GAAG,KAAK,CAAS,EAAE;0FAAC;AAEjC;;AAEG;QACH,IAAA,CAAA,cAAc,GAAG,KAAK,CAAS,EAAE;2FAAC;AAElC;;AAEG;QACH,IAAA,CAAA,EAAE,GAAG,KAAK,CAAkB,EAAE;+EAAC;AAE/B;;AAEG;QACH,IAAA,CAAA,IAAI,GAAG,KAAK,CAAc;AACtB,YAAA,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE;AACvB,YAAA,OAAO,EAAE;AACL,gBAAA,KAAK,EAAE,mBAAmB;AAC1B,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,QAAQ,EAAE,OAAO;AACpB,aAAA;AACJ,SAAA;iFAAC;AAEF;;;;AAIG;QACH,IAAA,CAAA,WAAW,GAAG,KAAK,CAAC,KAAK,mFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE3D;;;;AAIG;QACH,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAExD;;;;;AAKG;QACH,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAExD;;AAEG;QACH,IAAA,CAAA,UAAU,GAAG,MAAM,EAAe;AAElC;;AAEG;QACH,IAAA,CAAA,SAAS,GAAG,MAAM,EAAe;;QAGzB,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAiD7D,IAAA;AA/CG,IAAA,WAAW,CAAC,KAAa,EAAA;AACrB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACjB;QACJ;AAEA,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;AACpB,YAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QACxB;aAAO;AACH,YAAA,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QACvB;IACJ;AAEA;;AAEG;AACH,IAAA,iBAAiB,CAAC,KAAY,EAAA;QAC1B,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;IAC3B;AAEA;;AAEG;AACH,IAAA,WAAW,CAAC,KAAY,EAAA;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;YACxC;QACJ;QACA,KAAK,CAAC,cAAc,EAAE;QACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACrC;AAEA;;;;AAIG;AACK,IAAA,QAAQ,CAAC,KAAa,EAAA;QAC1B,IAAI,KAAK,YAAY,aAAa,IAAK,KAAuB,CAAC,IAAI,KAAK,WAAW,EAAE;AACjF,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;QAC3D;aAAO;YACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACrC;IACJ;AAEQ,IAAA,OAAO,CAAC,KAAa,EAAA;QACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACpC;8GAnJS,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAP,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,0tECjEpB,8NAMA,EAAA,MAAA,EAAA,CAAA,wvPAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,MAAA,EAAA,WAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FD2Da,OAAO,EAAA,UAAA,EAAA,CAAA;kBA9BnB,SAAS;AAEI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sCAAsC,EAAA,eAAA,EAE/B,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;AACL,wBAAA,GAAG,QAAQ;AACX,wBAAA,GAAG,eAAe;AAClB,wBAAA,GAAG,UAAU;qBAChB,EAAA,IAAA,EACK;AACF,wBAAA,KAAK,EAAE,UAAU;AACjB,wBAAA,cAAc,EAAE,SAAS;AACzB,wBAAA,aAAa,EAAE,QAAQ;AACvB,wBAAA,kBAAkB,EAAE,uBAAuB;AAC3C,wBAAA,eAAe,EAAE,oBAAoB;AACrC,wBAAA,iBAAiB,EAAE,oBAAoB;AACvC,wBAAA,iBAAiB,EAAE,yBAAyB;AAC5C,wBAAA,aAAa,EAAE,YAAY;AAC3B,wBAAA,sBAAsB,EAAE,4BAA4B;AACpD,wBAAA,qBAAqB,EAAE,4BAA4B;AACnD,wBAAA,mBAAmB,EAAE,aAAa;AAClC,wBAAA,iBAAiB,EAAE,WAAW;AAC9B,wBAAA,SAAS,EAAE,qBAAqB;AAChC,wBAAA,iBAAiB,EAAE,qBAAqB;AACxC,wBAAA,iBAAiB,EAAE,2BAA2B;AAC9C,wBAAA,kBAAkB,EAAE,qBAAqB;AACzC,wBAAA,qBAAqB,EAAE,qBAAqB;AAC/C,qBAAA,EAAA,QAAA,EAAA,8NAAA,EAAA,MAAA,EAAA,CAAA,wvPAAA,CAAA,EAAA;;;AE7CL;;;AAGG;MACU,YAAY,CAAA;IAcrB,WAAA,CAAY,MAAM,GAAG,EAAE,EAAA;QATvB,IAAA,CAAA,WAAW,GAAG,KAAK;QACnB,IAAA,CAAA,SAAS,GAAG,KAAK;QACjB,IAAA,CAAA,SAAS,GAAG,KAAK;QACjB,IAAA,CAAA,UAAU,GAAG,KAAK;QAClB,IAAA,CAAA,OAAO,GAAmF,SAAS;QACnG,IAAA,CAAA,OAAO,GAAmB,EAAE;AAKxB,QAAA,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC;IAC/B;AACH;;AClCM,MAAM,QAAQ,GAAG;IACpB,OAAO;;;ACNX;;AAEG;;;;"}

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

@@ -90,7 +90,7 @@ class EdsIcon {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsIcon, isStandalone: true, selector: "eds-icon, span[edsIcon]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, set: { classPropertyName: "set", publicName: "set", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.color": "color()", "attr.size": "size()", "attr.rounded": "rounded() || null", "attr.loading": "isLoading() || null", "attr.role": "ariaHidden() ? null : \"img\"", "attr.aria-label": "ariaLabel() || null", "attr.aria-hidden": "ariaHidden() || null" }, classAttribute: "eds-icon" }, ngImport: i0, template: "@if (isLoading()) {\n    <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n    <svg\n        class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n        aria-hidden=\"true\">\n        <use [attr.href]=\"assetsBaseUrl + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n    </svg>\n}\n<ng-content />\n", styles: [":host{--_eds-icon-size: var(--_icon-size, var(--eds-is-m));--_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground)));display:inline-flex;position:relative}:host .eds-icon-svg{height:var(--_eds-icon-size);width:var(--_eds-icon-size);fill:var(--_eds-icon-color);color:var(--_eds-icon-color)}:host .eds-icon-svg.eds-icon-set-flags-1x1,:host .eds-icon-svg.eds-icon-set-flags-4x3{fill:none}:host([size=\"2xs\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-2xs))}:host([size=xs]){--_eds-icon-size: var(--_icon-size, var(--eds-is-xs))}:host([size=s]){--_eds-icon-size: var(--_icon-size, var(--eds-is-s))}:host([size=m]){--_eds-icon-size: var(--_icon-size, var(--eds-is-m))}:host([size=l]){--_eds-icon-size: var(--_icon-size, var(--eds-is-l))}:host([size=xl]){--_eds-icon-size: var(--_icon-size, var(--eds-is-xl))}:host([size=\"2xl\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-2xl))}:host([size=\"3xl\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-3xl))}:host([size=\"4xl\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-4xl))}:host([color=neutral]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground))}:host([color=neutral-subtle]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle))}:host([color=neutral-subtler]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler))}:host([color=primary]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary))}:host([color=highlight]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight))}:host([color=info]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info))}:host([color=success]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success))}:host([color=warning]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning))}:host([color=critical]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical))}:host([color=brand]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand))}:host([color=disabled]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled))}:host([rounded]){border-radius:50%;overflow:hidden}:host([rounded]) .eds-icon-svg{border-radius:50%}:host([loading]) .eds-icon-spinner{display:inline-block;width:var(--_eds-icon-size);height:var(--_eds-icon-size);border:3px solid var(--eds-c-border-neutral-subtle);border-top-color:var(--_eds-icon-color);border-radius:50%;animation:eds-icon-spin .6s linear infinite}@keyframes eds-icon-spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsIcon, isStandalone: true, selector: "eds-icon, span[edsIcon]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, set: { classPropertyName: "set", publicName: "set", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.color": "color()", "attr.size": "size()", "attr.rounded": "rounded() || null", "attr.loading": "isLoading() || null", "attr.role": "ariaHidden() ? null : \"img\"", "attr.aria-label": "ariaLabel() || null", "attr.aria-hidden": "ariaHidden() || null" }, classAttribute: "eds-icon" }, ngImport: i0, template: "@if (isLoading()) {\n    <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n    <svg\n        class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n        aria-hidden=\"true\">\n        <use [attr.href]=\"assetsBaseUrl + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n    </svg>\n}\n<ng-content />\n", styles: [":host{--_eds-icon-size: var(--_icon-size, var(--eds-is-m));--_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground)));display:inline-flex;position:relative}:host .eds-icon-svg{height:var(--_eds-icon-size);width:var(--_eds-icon-size);fill:var(--_eds-icon-color);color:var(--_eds-icon-color)}:host .eds-icon-svg.eds-icon-set-flags-1x1,:host .eds-icon-svg.eds-icon-set-flags-4x3{fill:none}:host([size=\"2xs\"]){--_eds-icon-size: var(--eds-is-2xs)}:host([size=xs]){--_eds-icon-size: var(--eds-is-xs)}:host([size=s]){--_eds-icon-size: var(--eds-is-s)}:host([size=m]){--_eds-icon-size: var(--eds-is-m)}:host([size=l]){--_eds-icon-size: var(--eds-is-l)}:host([size=xl]){--_eds-icon-size: var(--eds-is-xl)}:host([size=\"2xl\"]){--_eds-icon-size: var(--eds-is-2xl)}:host([size=\"3xl\"]){--_eds-icon-size: var(--eds-is-3xl)}:host([size=\"4xl\"]){--_eds-icon-size: var(--eds-is-4xl)}:host([color=neutral]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground))}:host([color=neutral-subtle]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle))}:host([color=neutral-subtler]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler))}:host([color=primary]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary))}:host([color=highlight]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight))}:host([color=info]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info))}:host([color=success]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success))}:host([color=warning]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning))}:host([color=critical]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical))}:host([color=brand]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand))}:host([color=disabled]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled))}:host([rounded]){border-radius:50%;overflow:hidden}:host([rounded]) .eds-icon-svg{border-radius:50%}:host([loading]){--_eds-icon-spinner-border: max(2px, calc(var(--_eds-icon-size) * .125))}:host([loading]) .eds-icon-spinner{display:inline-block;box-sizing:border-box;width:var(--_eds-icon-size);height:var(--_eds-icon-size);border:var(--_eds-icon-spinner-border) solid var(--eds-c-border-neutral-subtle);border-top-color:var(--_eds-icon-color);border-radius:50%;animation:eds-icon-spin .6s linear infinite}@keyframes eds-icon-spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIcon, decorators: [{
             type: Component,
@@ -103,7 +103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '[attr.role]': 'ariaHidden() ? null : "img"',
                         '[attr.aria-label]': 'ariaLabel() || null',
                         '[attr.aria-hidden]': 'ariaHidden() || null',
-                    }, template: "@if (isLoading()) {\n    <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n    <svg\n        class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n        aria-hidden=\"true\">\n        <use [attr.href]=\"assetsBaseUrl + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n    </svg>\n}\n<ng-content />\n", styles: [":host{--_eds-icon-size: var(--_icon-size, var(--eds-is-m));--_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground)));display:inline-flex;position:relative}:host .eds-icon-svg{height:var(--_eds-icon-size);width:var(--_eds-icon-size);fill:var(--_eds-icon-color);color:var(--_eds-icon-color)}:host .eds-icon-svg.eds-icon-set-flags-1x1,:host .eds-icon-svg.eds-icon-set-flags-4x3{fill:none}:host([size=\"2xs\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-2xs))}:host([size=xs]){--_eds-icon-size: var(--_icon-size, var(--eds-is-xs))}:host([size=s]){--_eds-icon-size: var(--_icon-size, var(--eds-is-s))}:host([size=m]){--_eds-icon-size: var(--_icon-size, var(--eds-is-m))}:host([size=l]){--_eds-icon-size: var(--_icon-size, var(--eds-is-l))}:host([size=xl]){--_eds-icon-size: var(--_icon-size, var(--eds-is-xl))}:host([size=\"2xl\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-2xl))}:host([size=\"3xl\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-3xl))}:host([size=\"4xl\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-4xl))}:host([color=neutral]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground))}:host([color=neutral-subtle]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle))}:host([color=neutral-subtler]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler))}:host([color=primary]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary))}:host([color=highlight]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight))}:host([color=info]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info))}:host([color=success]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success))}:host([color=warning]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning))}:host([color=critical]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical))}:host([color=brand]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand))}:host([color=disabled]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled))}:host([rounded]){border-radius:50%;overflow:hidden}:host([rounded]) .eds-icon-svg{border-radius:50%}:host([loading]) .eds-icon-spinner{display:inline-block;width:var(--_eds-icon-size);height:var(--_eds-icon-size);border:3px solid var(--eds-c-border-neutral-subtle);border-top-color:var(--_eds-icon-color);border-radius:50%;animation:eds-icon-spin .6s linear infinite}@keyframes eds-icon-spin{to{transform:rotate(360deg)}}\n"] }]
+                    }, template: "@if (isLoading()) {\n    <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n    <svg\n        class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n        aria-hidden=\"true\">\n        <use [attr.href]=\"assetsBaseUrl + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n    </svg>\n}\n<ng-content />\n", styles: [":host{--_eds-icon-size: var(--_icon-size, var(--eds-is-m));--_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground)));display:inline-flex;position:relative}:host .eds-icon-svg{height:var(--_eds-icon-size);width:var(--_eds-icon-size);fill:var(--_eds-icon-color);color:var(--_eds-icon-color)}:host .eds-icon-svg.eds-icon-set-flags-1x1,:host .eds-icon-svg.eds-icon-set-flags-4x3{fill:none}:host([size=\"2xs\"]){--_eds-icon-size: var(--eds-is-2xs)}:host([size=xs]){--_eds-icon-size: var(--eds-is-xs)}:host([size=s]){--_eds-icon-size: var(--eds-is-s)}:host([size=m]){--_eds-icon-size: var(--eds-is-m)}:host([size=l]){--_eds-icon-size: var(--eds-is-l)}:host([size=xl]){--_eds-icon-size: var(--eds-is-xl)}:host([size=\"2xl\"]){--_eds-icon-size: var(--eds-is-2xl)}:host([size=\"3xl\"]){--_eds-icon-size: var(--eds-is-3xl)}:host([size=\"4xl\"]){--_eds-icon-size: var(--eds-is-4xl)}:host([color=neutral]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground))}:host([color=neutral-subtle]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle))}:host([color=neutral-subtler]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler))}:host([color=primary]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary))}:host([color=highlight]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight))}:host([color=info]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info))}:host([color=success]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success))}:host([color=warning]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning))}:host([color=critical]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical))}:host([color=brand]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand))}:host([color=disabled]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled))}:host([rounded]){border-radius:50%;overflow:hidden}:host([rounded]) .eds-icon-svg{border-radius:50%}:host([loading]){--_eds-icon-spinner-border: max(2px, calc(var(--_eds-icon-size) * .125))}:host([loading]) .eds-icon-spinner{display:inline-block;box-sizing:border-box;width:var(--_eds-icon-size);height:var(--_eds-icon-size);border:var(--_eds-icon-spinner-border) solid var(--eds-c-border-neutral-subtle);border-top-color:var(--_eds-icon-color);border-radius:50%;animation:eds-icon-spin .6s linear infinite}@keyframes eds-icon-spin{to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], set: [{ type: i0.Input, args: [{ isSignal: true, alias: "set", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHidden", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }] } });
 
 /**

package/fesm2022/eui-eds-eds-icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-eds-eds-icon.mjs","sources":["../../eds-icon/eds-icon.ts","../../eds-icon/eds-icon.html","../../eds-icon/eds-icon-image.ts","../../eds-icon/eds-icon-image.html","../../eds-icon/index.ts","../../eds-icon/eui-eds-eds-icon.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    OnInit,\n    inject,\n    computed,\n    booleanAttribute,\n    input,\n} from '@angular/core';\nimport { EUI_CONFIG_TOKEN } from '@eui/core';\nimport { EuiConfig } from '@eui/core';\n\n/**\n * Local narrowed color union — the icon's color contract.\n * Maps the legacy `EdsColorDirective` semantic booleans to EDS semantic colors.\n */\nexport type EdsIconColor =\n    | 'neutral'\n    | 'neutral-subtle'\n    | 'neutral-subtler'\n    | 'primary'\n    | 'highlight'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'critical'\n    | 'brand'\n    | 'disabled';\n\n/**\n * Local narrowed size union — the icon's size contract.\n */\nexport type EdsIconSize =\n    | '2xs'\n    | 'xs'\n    | 's'\n    | 'm'\n    | 'l'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl';\n\n/**\n * @description\n * Displays a scalable vector icon from a sprite set. Supports semantic color and size via\n * string inputs reflected as host attributes, an optional circular clip, and a loading spinner.\n * Icons resolve from the configured assets path using the `iconName:setName` convention.\n *\n * @usageNotes\n * ```html\n * <eds-icon icon=\"check\" color=\"success\" size=\"m\" />\n * <eds-icon icon=\"warning\" color=\"warning\" size=\"l\" [ariaHidden]=\"false\" ariaLabel=\"Warning\" />\n * <eds-icon icon=\"check:core\" />\n * ```\n */\n@Component({\n    selector: 'eds-icon, span[edsIcon]',\n    templateUrl: './eds-icon.html',\n    styleUrls: ['./eds-icon.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'eds-icon',\n        '[attr.color]': 'color()',\n        '[attr.size]': 'size()',\n        '[attr.rounded]': 'rounded() || null',\n        '[attr.loading]': 'isLoading() || null',\n        '[attr.role]': 'ariaHidden() ? null : \"img\"',\n        '[attr.aria-label]': 'ariaLabel() || null',\n        '[attr.aria-hidden]': 'ariaHidden() || null',\n    },\n})\nexport class EdsIcon implements OnInit {\n    /**\n     * Name of the icon to display, optionally including the icon set using 'iconName:setName' format.\n     * When format includes colon separator, automatically splits into icon and set properties.\n     */\n    icon = input<string>('');\n\n    /**\n     * Icon set library to load the icon from.\n     * @default 'regular'\n     */\n    set = input('regular');\n\n    /**\n     * Semantic color of the icon.\n     * @default 'neutral'\n     */\n    color = input<EdsIconColor>('neutral');\n\n    /**\n     * Size of the icon.\n     * @default 'm'\n     */\n    size = input<EdsIconSize>('m');\n\n    /**\n     * Accessible label for screen readers describing the icon's purpose.\n     */\n    ariaLabel = input<string>('');\n\n    /**\n     * Hides the icon from assistive technologies when purely decorative.\n     * @default true\n     */\n    ariaHidden = input(true, { transform: booleanAttribute });\n\n    /**\n     * Applies a circular clip (border-radius: 50%) to the icon, useful for flag icons.\n     * @default false\n     */\n    rounded = input(false, { transform: booleanAttribute });\n\n    /**\n     * When true, replaces the icon with a spinning loading indicator.\n     * The spinner inherits the icon's size and color.\n     * @default false\n     */\n    isLoading = input(false, { transform: booleanAttribute });\n\n    /** Resolved icon name (parsed from 'icon:set' format). */\n    iconName = computed(() => {\n        const raw = this.icon();\n        if (raw && raw.indexOf(':') > -1) {\n            return raw.split(':')[0];\n        }\n        return raw;\n    });\n\n    /** Resolved icon set (parsed from 'icon:set' format or defaults to set input). */\n    resolvedSet = computed(() => {\n        const raw = this.icon();\n        if (raw && raw.indexOf(':') > -1) {\n            return raw.split(':')[1] || 'regular';\n        }\n        return this.set() || 'regular';\n    });\n\n    public assetsBaseUrl = 'assets';\n\n    private config = inject<EuiConfig>(EUI_CONFIG_TOKEN, { optional: true })!;\n\n    ngOnInit(): void {\n        const assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl;\n        if (assetsBaseUrl) {\n            this.assetsBaseUrl = assetsBaseUrl;\n        }\n    }\n}\n","@if (isLoading()) {\n    <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n    <svg\n        class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n        aria-hidden=\"true\">\n        <use [attr.href]=\"assetsBaseUrl + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n    </svg>\n}\n<ng-content />\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    OnInit,\n    inject,\n    booleanAttribute,\n    input,\n} from '@angular/core';\nimport { EUI_CONFIG_TOKEN } from '@eui/core';\nimport { EuiConfig } from '@eui/core';\nimport { EdsIconSize } from './eds-icon';\n\n/**\n * @description\n * Displays a raster/vector image as an icon from a direct URL, bypassing sprite-set resolution.\n * Sized via the `size` string input reflected as a host attribute.\n *\n * @usageNotes\n * ```html\n * <eds-icon-image iconUrl=\"/assets/custom-icon.svg\" size=\"l\" ariaLabel=\"Custom icon\" />\n * ```\n */\n@Component({\n    selector: 'eds-icon-image, span[edsIconImage]',\n    templateUrl: './eds-icon-image.html',\n    styleUrls: ['./eds-icon-image.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        '[attr.size]': 'size()',\n        '[attr.role]': 'ariaHidden() ? null : \"img\"',\n        '[attr.aria-label]': 'ariaLabel() || null',\n        '[attr.aria-hidden]': 'ariaHidden() || null',\n    },\n})\nexport class EdsIconImage implements OnInit {\n    /**\n     * Direct URL to an SVG icon file, bypassing the icon set resolution.\n     * Useful for loading custom or external icons not in configured icon sets.\n     */\n    iconUrl = input<string>('');\n\n    /**\n     * Size of the icon.\n     * @default 'm'\n     */\n    size = input<EdsIconSize>('m');\n\n    /**\n     * Accessible label for screen readers describing the icon's purpose.\n     */\n    ariaLabel = input<string>('');\n\n    /**\n     * Hides the icon from assistive technologies when purely decorative.\n     * @default true\n     */\n    ariaHidden = input(true, { transform: booleanAttribute });\n\n    public assetsBaseUrl = 'assets';\n\n    private config = inject<EuiConfig>(EUI_CONFIG_TOKEN, { optional: true })!;\n\n    ngOnInit(): void {\n        const assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl;\n        if (assetsBaseUrl) {\n            this.assetsBaseUrl = assetsBaseUrl;\n        }\n    }\n}\n","<svg class=\"eds-icon-svg-image\" aria-hidden=\"true\" role=\"img\">\n    <image [attr.href]=\"iconUrl()\" class=\"eds-icon-svg-image\"></image>\n</svg>\n","import { EdsIcon } from './eds-icon';\nimport { EdsIconImage } from './eds-icon-image';\n\nexport * from './eds-icon';\nexport * from './eds-icon-image';\n\nexport const EDS_ICON = [\n    EdsIcon,\n    EdsIconImage,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-eds-eds-icon.mjs","sources":["../../eds-icon/eds-icon.ts","../../eds-icon/eds-icon.html","../../eds-icon/eds-icon-image.ts","../../eds-icon/eds-icon-image.html","../../eds-icon/index.ts","../../eds-icon/eui-eds-eds-icon.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    OnInit,\n    inject,\n    computed,\n    booleanAttribute,\n    input,\n} from '@angular/core';\nimport { EUI_CONFIG_TOKEN } from '@eui/core';\nimport { EuiConfig } from '@eui/core';\n\n/**\n * Local narrowed color union — the icon's color contract.\n * Maps the legacy `EdsColorDirective` semantic booleans to EDS semantic colors.\n */\nexport type EdsIconColor =\n    | 'neutral'\n    | 'neutral-subtle'\n    | 'neutral-subtler'\n    | 'primary'\n    | 'highlight'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'critical'\n    | 'brand'\n    | 'disabled';\n\n/**\n * Local narrowed size union — the icon's size contract.\n */\nexport type EdsIconSize =\n    | '2xs'\n    | 'xs'\n    | 's'\n    | 'm'\n    | 'l'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl';\n\n/**\n * @description\n * Displays a scalable vector icon from a sprite set. Supports semantic color and size via\n * string inputs reflected as host attributes, an optional circular clip, and a loading spinner.\n * Icons resolve from the configured assets path using the `iconName:setName` convention.\n *\n * @usageNotes\n * ```html\n * <eds-icon icon=\"check\" color=\"success\" size=\"m\" />\n * <eds-icon icon=\"warning\" color=\"warning\" size=\"l\" [ariaHidden]=\"false\" ariaLabel=\"Warning\" />\n * <eds-icon icon=\"check:core\" />\n * ```\n */\n@Component({\n    selector: 'eds-icon, span[edsIcon]',\n    templateUrl: './eds-icon.html',\n    styleUrls: ['./eds-icon.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'eds-icon',\n        '[attr.color]': 'color()',\n        '[attr.size]': 'size()',\n        '[attr.rounded]': 'rounded() || null',\n        '[attr.loading]': 'isLoading() || null',\n        '[attr.role]': 'ariaHidden() ? null : \"img\"',\n        '[attr.aria-label]': 'ariaLabel() || null',\n        '[attr.aria-hidden]': 'ariaHidden() || null',\n    },\n})\nexport class EdsIcon implements OnInit {\n    /**\n     * Name of the icon to display, optionally including the icon set using 'iconName:setName' format.\n     * When format includes colon separator, automatically splits into icon and set properties.\n     */\n    icon = input<string>('');\n\n    /**\n     * Icon set library to load the icon from.\n     * @default 'regular'\n     */\n    set = input('regular');\n\n    /**\n     * Semantic color of the icon.\n     * @default 'neutral'\n     */\n    color = input<EdsIconColor>('neutral');\n\n    /**\n     * Size of the icon.\n     * @default 'm'\n     */\n    size = input<EdsIconSize>('m');\n\n    /**\n     * Accessible label for screen readers describing the icon's purpose.\n     */\n    ariaLabel = input<string>('');\n\n    /**\n     * Hides the icon from assistive technologies when purely decorative.\n     * @default true\n     */\n    ariaHidden = input(true, { transform: booleanAttribute });\n\n    /**\n     * Applies a circular clip (border-radius: 50%) to the icon, useful for flag icons.\n     * @default false\n     */\n    rounded = input(false, { transform: booleanAttribute });\n\n    /**\n     * When true, replaces the icon with a spinning loading indicator.\n     * The spinner inherits the icon's size and color.\n     * @default false\n     */\n    isLoading = input(false, { transform: booleanAttribute });\n\n    /** Resolved icon name (parsed from 'icon:set' format). */\n    iconName = computed(() => {\n        const raw = this.icon();\n        if (raw && raw.indexOf(':') > -1) {\n            return raw.split(':')[0];\n        }\n        return raw;\n    });\n\n    /** Resolved icon set (parsed from 'icon:set' format or defaults to set input). */\n    resolvedSet = computed(() => {\n        const raw = this.icon();\n        if (raw && raw.indexOf(':') > -1) {\n            return raw.split(':')[1] || 'regular';\n        }\n        return this.set() || 'regular';\n    });\n\n    public assetsBaseUrl = 'assets';\n\n    private config = inject<EuiConfig>(EUI_CONFIG_TOKEN, { optional: true })!;\n\n    ngOnInit(): void {\n        const assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl;\n        if (assetsBaseUrl) {\n            this.assetsBaseUrl = assetsBaseUrl;\n        }\n    }\n}\n","@if (isLoading()) {\n    <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n    <svg\n        class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n        aria-hidden=\"true\">\n        <use [attr.href]=\"assetsBaseUrl + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n    </svg>\n}\n<ng-content />\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    OnInit,\n    inject,\n    booleanAttribute,\n    input,\n} from '@angular/core';\nimport { EUI_CONFIG_TOKEN } from '@eui/core';\nimport { EuiConfig } from '@eui/core';\nimport { EdsIconSize } from './eds-icon';\n\n/**\n * @description\n * Displays a raster/vector image as an icon from a direct URL, bypassing sprite-set resolution.\n * Sized via the `size` string input reflected as a host attribute.\n *\n * @usageNotes\n * ```html\n * <eds-icon-image iconUrl=\"/assets/custom-icon.svg\" size=\"l\" ariaLabel=\"Custom icon\" />\n * ```\n */\n@Component({\n    selector: 'eds-icon-image, span[edsIconImage]',\n    templateUrl: './eds-icon-image.html',\n    styleUrls: ['./eds-icon-image.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        '[attr.size]': 'size()',\n        '[attr.role]': 'ariaHidden() ? null : \"img\"',\n        '[attr.aria-label]': 'ariaLabel() || null',\n        '[attr.aria-hidden]': 'ariaHidden() || null',\n    },\n})\nexport class EdsIconImage implements OnInit {\n    /**\n     * Direct URL to an SVG icon file, bypassing the icon set resolution.\n     * Useful for loading custom or external icons not in configured icon sets.\n     */\n    iconUrl = input<string>('');\n\n    /**\n     * Size of the icon.\n     * @default 'm'\n     */\n    size = input<EdsIconSize>('m');\n\n    /**\n     * Accessible label for screen readers describing the icon's purpose.\n     */\n    ariaLabel = input<string>('');\n\n    /**\n     * Hides the icon from assistive technologies when purely decorative.\n     * @default true\n     */\n    ariaHidden = input(true, { transform: booleanAttribute });\n\n    public assetsBaseUrl = 'assets';\n\n    private config = inject<EuiConfig>(EUI_CONFIG_TOKEN, { optional: true })!;\n\n    ngOnInit(): void {\n        const assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl;\n        if (assetsBaseUrl) {\n            this.assetsBaseUrl = assetsBaseUrl;\n        }\n    }\n}\n","<svg class=\"eds-icon-svg-image\" aria-hidden=\"true\" role=\"img\">\n    <image [attr.href]=\"iconUrl()\" class=\"eds-icon-svg-image\"></image>\n</svg>\n","import { EdsIcon } from './eds-icon';\nimport { EdsIconImage } from './eds-icon-image';\n\nexport * from './eds-icon';\nexport * from './eds-icon-image';\n\nexport const EDS_ICON = [\n    EdsIcon,\n    EdsIconImage,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AA2CA;;;;;;;;;;;;AAYG;MAiBU,OAAO,CAAA;AAhBpB,IAAA,WAAA,GAAA;AAiBI;;;AAGG;QACH,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE;iFAAC;AAExB;;;AAGG;QACH,IAAA,CAAA,GAAG,GAAG,KAAK,CAAC,SAAS;gFAAC;AAEtB;;;AAGG;QACH,IAAA,CAAA,KAAK,GAAG,KAAK,CAAe,SAAS;kFAAC;AAEtC;;;AAGG;QACH,IAAA,CAAA,IAAI,GAAG,KAAK,CAAc,GAAG;iFAAC;AAE9B;;AAEG;QACH,IAAA,CAAA,SAAS,GAAG,KAAK,CAAS,EAAE;sFAAC;AAE7B;;;AAGG;QACH,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,IAAI,kFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEzD;;;AAGG;QACH,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEvD;;;;AAIG;QACH,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,KAAK,iFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;AAGzD,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AACrB,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE;AACvB,YAAA,IAAI,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE;gBAC9B,OAAO,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YAC5B;AACA,YAAA,OAAO,GAAG;QACd,CAAC;qFAAC;;AAGF,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AACxB,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE;AACvB,YAAA,IAAI,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE;gBAC9B,OAAO,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,SAAS;YACzC;AACA,YAAA,OAAO,IAAI,CAAC,GAAG,EAAE,IAAI,SAAS;QAClC,CAAC;wFAAC;QAEK,IAAA,CAAA,aAAa,GAAG,QAAQ;QAEvB,IAAA,CAAA,MAAM,GAAG,MAAM,CAAY,gBAAgB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAE;AAQ5E,IAAA;IANG,QAAQ,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,aAAa;QACxE,IAAI,aAAa,EAAE;AACf,YAAA,IAAI,CAAC,aAAa,GAAG,aAAa;QACtC;IACJ;8GA5ES,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAP,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,s3CCxEpB,wXAUA,EAAA,MAAA,EAAA,CAAA,+iFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FD8Da,OAAO,EAAA,UAAA,EAAA,CAAA;kBAhBnB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,yBAAyB,EAAA,eAAA,EAGlB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACF,wBAAA,KAAK,EAAE,UAAU;AACjB,wBAAA,cAAc,EAAE,SAAS;AACzB,wBAAA,aAAa,EAAE,QAAQ;AACvB,wBAAA,gBAAgB,EAAE,mBAAmB;AACrC,wBAAA,gBAAgB,EAAE,qBAAqB;AACvC,wBAAA,aAAa,EAAE,6BAA6B;AAC5C,wBAAA,mBAAmB,EAAE,qBAAqB;AAC1C,wBAAA,oBAAoB,EAAE,sBAAsB;AAC/C,qBAAA,EAAA,QAAA,EAAA,wXAAA,EAAA,MAAA,EAAA,CAAA,+iFAAA,CAAA,EAAA;;;AE1DL;;;;;;;;;AASG;MAaU,YAAY,CAAA;AAZzB,IAAA,WAAA,GAAA;AAaI;;;AAGG;QACH,IAAA,CAAA,OAAO,GAAG,KAAK,CAAS,EAAE;oFAAC;AAE3B;;;AAGG;QACH,IAAA,CAAA,IAAI,GAAG,KAAK,CAAc,GAAG;iFAAC;AAE9B;;AAEG;QACH,IAAA,CAAA,SAAS,GAAG,KAAK,CAAS,EAAE;sFAAC;AAE7B;;;AAGG;QACH,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,IAAI,kFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;QAElD,IAAA,CAAA,aAAa,GAAG,QAAQ;QAEvB,IAAA,CAAA,MAAM,GAAG,MAAM,CAAY,gBAAgB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAE;AAQ5E,IAAA;IANG,QAAQ,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,aAAa;QACxE,IAAI,aAAa,EAAE;AACf,YAAA,IAAI,CAAC,aAAa,GAAG,aAAa;QACtC;IACJ;8GAjCS,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAZ,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,6xBClCzB,4JAGA,EAAA,MAAA,EAAA,CAAA,suBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FD+Ba,YAAY,EAAA,UAAA,EAAA,CAAA;kBAZxB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oCAAoC,EAAA,eAAA,EAG7B,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACF,wBAAA,aAAa,EAAE,QAAQ;AACvB,wBAAA,aAAa,EAAE,6BAA6B;AAC5C,wBAAA,mBAAmB,EAAE,qBAAqB;AAC1C,wBAAA,oBAAoB,EAAE,sBAAsB;AAC/C,qBAAA,EAAA,QAAA,EAAA,4JAAA,EAAA,MAAA,EAAA,CAAA,suBAAA,CAAA,EAAA;;;AE1BE,MAAM,QAAQ,GAAG;IACpB,OAAO;IACP,YAAY;;;ACRhB;;AAEG;;;;"}

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

@@ -1,49 +1,43 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, inject, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i1 from '@eui/eds/shared';
-import { EdsColorDirective } from '@eui/eds/shared';
+import { input, booleanAttribute, ChangeDetectionStrategy, Component } from '@angular/core';
 
+/**
+ * A form label applied to `label`, `span`, or `div` elements via the `edsLabel` attribute.
+ * Supports a semantic color (`neutral` default, `critical` for errors) reflected as a host
+ * attribute, plus a required marker.
+ *
+ * Usage:
+ * ```html
+ * <label edsLabel for="name">Name</label>
+ * <label edsLabel edsRequired for="email">Email</label>
+ * <span edsLabel color="critical">This field is required</span>
+ * ```
+ */
 class EdsLabel {
     constructor() {
+        /**
+         * Semantic color of the label.
+         * @default 'neutral'
+         */
+        this.color = input('neutral', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         /**
          * Marks the label as required (appends a red asterisk).
          * @default false
          */
         this.edsRequired = input(false, { ...(ngDevMode ? { debugName: "edsRequired" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.colorDirective = inject(EdsColorDirective);
-        /**
-         * Computed host CSS classes based on current state.
-         */
-        this.hostClasses = computed(() => {
-            const colorClass = this.colorDirective.getCssClass('eds-label');
-            return [
-                'eds-label',
-                colorClass || 'eds-label--neutral',
-                this.edsRequired() ? 'eds-label--required' : '',
-            ]
-                .join(' ')
-                .trim();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsLabel, isStandalone: true, selector: "label[edsLabel], span[edsLabel], div[edsLabel]", inputs: { edsRequired: { classPropertyName: "edsRequired", publicName: "edsRequired", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, hostDirectives: [{ directive: i1.EdsColorDirective, inputs: ["edsNeutral", "edsNeutral", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host.eds-label{display:inline-block;font:var(--eds-f-label-m-semibold);color:var(--eds-c-foreground)}.eui-21 :host.eds-label--required:after{color:var(--eds-c-foreground-critical);content:\" *\";font:var(--eds-f-label-m-semibold)}.eui-21 :host.eds-label--neutral{color:var(--eds-c-foreground)}.eui-21 :host.eds-label--critical{color:var(--eds-c-foreground-critical)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsLabel, isStandalone: true, selector: "label[edsLabel], span[edsLabel], div[edsLabel]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, edsRequired: { classPropertyName: "edsRequired", publicName: "edsRequired", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.color": "color()", "attr.required": "edsRequired() || null" }, classAttribute: "eds-label" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [":host{display:inline-block;font:var(--eds-f-label-m-semibold);color:var(--eds-c-foreground)}:host([color=neutral]){color:var(--eds-c-foreground)}:host([color=critical]){color:var(--eds-c-foreground-critical)}:host([required]):after{color:var(--eds-c-foreground-critical);content:\" *\";font:var(--eds-f-label-m-semibold)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsLabel, decorators: [{
             type: Component,
-            args: [{ selector: 'label[edsLabel], span[edsLabel], div[edsLabel]', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
-                        {
-                            directive: EdsColorDirective,
-                            inputs: [
-                                'edsNeutral',
-                                'edsCritical',
-                                'edsColorVariant',
-                            ],
-                        },
-                    ], host: {
-                        '[class]': 'hostClasses()',
-                    }, styles: [".eui-21 :host.eds-label{display:inline-block;font:var(--eds-f-label-m-semibold);color:var(--eds-c-foreground)}.eui-21 :host.eds-label--required:after{color:var(--eds-c-foreground-critical);content:\" *\";font:var(--eds-f-label-m-semibold)}.eui-21 :host.eds-label--neutral{color:var(--eds-c-foreground)}.eui-21 :host.eds-label--critical{color:var(--eds-c-foreground-critical)}\n"] }]
-        }], propDecorators: { edsRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsRequired", required: false }] }] } });
+            args: [{ selector: 'label[edsLabel], span[edsLabel], div[edsLabel]', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'eds-label',
+                        '[attr.color]': 'color()',
+                        '[attr.required]': 'edsRequired() || null',
+                    }, styles: [":host{display:inline-block;font:var(--eds-f-label-m-semibold);color:var(--eds-c-foreground)}:host([color=neutral]){color:var(--eds-c-foreground)}:host([color=critical]){color:var(--eds-c-foreground-critical)}:host([required]):after{color:var(--eds-c-foreground-critical);content:\" *\";font:var(--eds-f-label-m-semibold)}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], edsRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsRequired", required: false }] }] } });
 
 /** Convenience array for importing eds-label. */
 const EDS_LABEL = [

package/fesm2022/eui-eds-eds-label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-eds-eds-label.mjs","sources":["../../eds-label/eds-label.ts","../../eds-label/index.ts","../../eds-label/eui-eds-eds-label.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    computed,\n    booleanAttribute,\n    inject,\n} from '@angular/core';\n\nimport { EdsColorDirective } from '@eui/eds/shared';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'label[edsLabel], span[edsLabel], div[edsLabel]',\n    template: '<ng-content/>',\n    styleUrl: './eds-label.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    hostDirectives: [\n        {\n            directive: EdsColorDirective,\n            inputs: [\n                'edsNeutral',\n                'edsCritical',\n                'edsColorVariant',\n            ],\n        },\n    ],\n    host: {\n        '[class]': 'hostClasses()',\n    },\n})\nexport class EdsLabel {\n    /**\n     * Marks the label as required (appends a red asterisk).\n     * @default false\n     */\n    edsRequired = input(false, { transform: booleanAttribute });\n\n    protected colorDirective = inject(EdsColorDirective);\n\n    /**\n     * Computed host CSS classes based on current state.\n     */\n    hostClasses = computed(() => {\n        const colorClass = this.colorDirective.getCssClass('eds-label');\n        return [\n            'eds-label',\n            colorClass || 'eds-label--neutral',\n            this.edsRequired() ? 'eds-label--required' : '',\n        ]\n            .join(' ')\n            .trim();\n    });\n}\n","import { EdsLabel } from './eds-label';\n\nexport { EdsLabel };\n\n/** Convenience array for importing eds-label. */\nexport const EDS_LABEL = [\n    EdsLabel,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MA+Ba,QAAQ,CAAA;AApBrB,IAAA,WAAA,GAAA;AAqBI;;;AAGG;QACH,IAAA,CAAA,WAAW,GAAG,KAAK,CAAC,KAAK,mFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEjD,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAEpD;;AAEG;AACH,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;YACxB,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,WAAW,CAAC;YAC/D,OAAO;gBACH,WAAW;AACX,gBAAA,UAAU,IAAI,oBAAoB;gBAClC,IAAI,CAAC,WAAW,EAAE,GAAG,qBAAqB,GAAG,EAAE;AAClD;iBACI,IAAI,CAAC,GAAG;AACR,iBAAA,IAAI,EAAE;QACf,CAAC;wFAAC;AACL,IAAA;8GAtBY,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAR,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,qdAjBP,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2XAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAiBhB,QAAQ,EAAA,UAAA,EAAA,CAAA;kBApBpB,SAAS;AAEI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gDAAgD,YAChD,eAAe,EAAA,eAAA,EAER,uBAAuB,CAAC,MAAM,EAAA,cAAA,EAC/B;AACZ,wBAAA;AACI,4BAAA,SAAS,EAAE,iBAAiB;AAC5B,4BAAA,MAAM,EAAE;gCACJ,YAAY;gCACZ,aAAa;gCACb,iBAAiB;AACpB,6BAAA;AACJ,yBAAA;qBACJ,EAAA,IAAA,EACK;AACF,wBAAA,SAAS,EAAE,eAAe;AAC7B,qBAAA,EAAA,MAAA,EAAA,CAAA,2XAAA,CAAA,EAAA;;;ACzBL;AACO,MAAM,SAAS,GAAG;IACrB,QAAQ;;;ACNZ;;AAEG;;;;"}
+{"version":3,"file":"eui-eds-eds-label.mjs","sources":["../../eds-label/eds-label.ts","../../eds-label/index.ts","../../eds-label/eui-eds-eds-label.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectionStrategy,\n    input,\n    booleanAttribute,\n} from '@angular/core';\n\n/**\n * Local narrowed color union — the label's color contract.\n * `neutral` is the default; `critical` colors the label for error context.\n */\nexport type EdsLabelColor = 'neutral' | 'critical';\n\n/**\n * A form label applied to `label`, `span`, or `div` elements via the `edsLabel` attribute.\n * Supports a semantic color (`neutral` default, `critical` for errors) reflected as a host\n * attribute, plus a required marker.\n *\n * Usage:\n * ```html\n * <label edsLabel for=\"name\">Name</label>\n * <label edsLabel edsRequired for=\"email\">Email</label>\n * <span edsLabel color=\"critical\">This field is required</span>\n * ```\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'label[edsLabel], span[edsLabel], div[edsLabel]',\n    template: '<ng-content/>',\n    styleUrl: './eds-label.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'eds-label',\n        '[attr.color]': 'color()',\n        '[attr.required]': 'edsRequired() || null',\n    },\n})\nexport class EdsLabel {\n    /**\n     * Semantic color of the label.\n     * @default 'neutral'\n     */\n    color = input<EdsLabelColor>('neutral');\n\n    /**\n     * Marks the label as required (appends a red asterisk).\n     * @default false\n     */\n    edsRequired = input(false, { transform: booleanAttribute });\n}\n","import { EdsLabel } from './eds-label';\n\nexport { EdsLabel };\nexport type { EdsLabelColor } from './eds-label';\n\n/** Convenience array for importing eds-label. */\nexport const EDS_LABEL = [\n    EdsLabel,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAaA;;;;;;;;;;;AAWG;MAaU,QAAQ,CAAA;AAZrB,IAAA,WAAA,GAAA;AAaI;;;AAGG;QACH,IAAA,CAAA,KAAK,GAAG,KAAK,CAAgB,SAAS;kFAAC;AAEvC;;;AAGG;QACH,IAAA,CAAA,WAAW,GAAG,KAAK,CAAC,KAAK,mFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAC9D,IAAA;8GAZY,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAR,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,kfATP,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,qUAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAShB,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAZpB,SAAS;AAEI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gDAAgD,YAChD,eAAe,EAAA,eAAA,EAER,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACF,wBAAA,KAAK,EAAE,WAAW;AAClB,wBAAA,cAAc,EAAE,SAAS;AACzB,wBAAA,iBAAiB,EAAE,uBAAuB;AAC7C,qBAAA,EAAA,MAAA,EAAA,CAAA,qUAAA,CAAA,EAAA;;;AC9BL;AACO,MAAM,SAAS,GAAG;IACrB,QAAQ;;;ACPZ;;AAEG;;;;"}

package/fesm2022/eui-eds-eds-language-selector.mjs

@@ -302,7 +302,7 @@ class EdsLanguageSelector {
         }, this.injector);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsLanguageSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsLanguageSelector, isStandalone: true, selector: "eds-language-selector", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, selectedLanguage: { classPropertyName: "selectedLanguage", publicName: "selectedLanguage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isRightAligned: { classPropertyName: "isRightAligned", publicName: "isRightAligned", isSignal: true, isRequired: false, transformFunction: null }, hasIconLayout: { classPropertyName: "hasIconLayout", publicName: "hasIconLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { languageChange: "languageChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClasses()" } }, hostDirectives: [{ directive: i1$1.EdsColorDirective, inputs: ["edsBrand", "edsBrand", "edsNeutral", "edsNeutral", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"language-toggle\"\n  [class.language-toggle--icon-layout]=\"hasIconLayout()\"\n  [attr.aria-label]=\"computedAriaLabel()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  aria-haspopup=\"listbox\"\n  (click)=\"toggle()\"\n  (keydown)=\"onToggleKeydown($event)\">\n  @if (hasIconLayout()) {\n    <eds-icon icon=\"globe\" size=\"s\" />\n    <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n  } @else {\n    <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n    <eds-icon [icon]=\"isOpen() ? 'caret-up' : 'caret-down'\" size=\"s\" />\n  }\n</button>\n\n@if (isOpen()) {\n  <ul\n    class=\"language-dropdown\"\n    [class.language-dropdown--align-right]=\"resolvedAlignRight()\"\n    role=\"listbox\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    (keydown)=\"onDropdownKeydown($event)\">\n    @for (lang of languages(); track lang.code; let i = $index) {\n      <li\n        class=\"language-option\"\n        [class.selected]=\"lang.code === selectedLanguage()\"\n        [class.focused]=\"i === focusedIndex()\"\n        role=\"option\"\n        [id]=\"'eds-lang-option-' + lang.code\"\n        [attr.aria-selected]=\"lang.code === selectedLanguage()\"\n        [tabindex]=\"i === focusedIndex() ? 0 : -1\"\n        (click)=\"selectLanguage(lang)\">\n        <span class=\"option-code\">{{ lang.code | uppercase }}</span>\n        <span class=\"option-label\">{{ lang.label }}</span>\n      </li>\n    }\n  </ul>\n}\n", styles: [".eui-21 :host{display:inline-flex;position:relative}.eui-21 :host .language-toggle{display:flex;align-items:center;gap:var(--eds-sp-3xs);padding:var(--eds-sp-3xs) var(--eds-sp-xs);border:var(--eds-bw-xs) solid var(--eds-c-border-neutral-subtle);border-radius:var(--eds-br-s);background:none;cursor:pointer;font:var(--eds-f-label-m-semibold);color:inherit;transition:background .15s ease,border-color .15s ease}.eui-21 :host .language-toggle:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host .language-toggle:hover{background:var(--eds-c-surface-elevation-sunken);border-color:var(--eds-c-border-neutral)}.eui-21 :host .language-toggle--icon-layout{border:none;padding:var(--eds-sp-3xs) var(--eds-sp-2xs);gap:var(--eds-sp-3xs);border-radius:var(--eds-br-s)}.eui-21 :host .language-toggle--icon-layout:hover{background:var(--eds-c-surface-elevation-sunken)}.eui-21 :host .language-code{font:var(--eds-f-label-m-semibold)}.eui-21 :host .chevron{font-size:var(--eds-f-s-xs);color:var(--eds-c-foreground-subtler)}.eui-21 :host .language-dropdown{position:absolute;top:100%;left:0;z-index:200;margin-top:var(--eds-sp-3xs);min-width:160px;list-style:none;padding:var(--eds-sp-3xs) var(--eds-sp-none);background:var(--eds-c-surface-elevation-overlay);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-3)}.eui-21 :host .language-dropdown--align-right{left:auto;right:0}.eui-21 :host .language-option{display:flex;align-items:center;gap:var(--eds-sp-xs);padding:var(--eds-sp-xs) var(--eds-sp-m);cursor:pointer;font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground);transition:background .15s ease;outline:none}.eui-21 :host .language-option:hover,.eui-21 :host .language-option.focused{background:var(--eds-c-surface-elevation-sunken)}.eui-21 :host .language-option.focused{outline:var(--eds-bw-xs) solid var(--eds-c-border-primary);outline-offset:-1px}.eui-21 :host .language-option.selected{color:var(--eds-c-foreground-primary);font-weight:var(--eds-f-w-semibold)}.eui-21 :host .option-code{font:var(--eds-f-label-m-semibold);min-width:2rem}.eui-21 :host .option-label{flex:1}.eui-21 :host.eds-language-selector--brand .language-toggle{color:var(--eds-c-on-surface-brand);border-color:transparent}.eui-21 :host.eds-language-selector--brand .language-toggle:hover{background:var(--eds-c-surface-brand--hover);color:var(--eds-c-on-surface-brand--hover)}.eui-21 :host.eds-language-selector--brand .language-toggle--icon-layout:hover{background:var(--eds-c-surface-brand--hover);color:var(--eds-c-on-surface-brand--hover)}.eui-21 :host.eds-language-selector--brand .language-toggle ::ng-deep .eds-icon{--_on-surface: var(--eds-c-on-surface-brand)}.eui-21 :host.eds-language-selector--brand .chevron{color:var(--eds-c-on-surface-brand)}\n"], dependencies: [{ kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsLanguageSelector, isStandalone: true, selector: "eds-language-selector", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, selectedLanguage: { classPropertyName: "selectedLanguage", publicName: "selectedLanguage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isRightAligned: { classPropertyName: "isRightAligned", publicName: "isRightAligned", isSignal: true, isRequired: false, transformFunction: null }, hasIconLayout: { classPropertyName: "hasIconLayout", publicName: "hasIconLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { languageChange: "languageChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClasses()" } }, hostDirectives: [{ directive: i1$1.EdsColorDirective, inputs: ["edsBrand", "edsBrand", "edsNeutral", "edsNeutral", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"language-toggle\"\n  [class.language-toggle--icon-layout]=\"hasIconLayout()\"\n  [attr.aria-label]=\"computedAriaLabel()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  aria-haspopup=\"listbox\"\n  (click)=\"toggle()\"\n  (keydown)=\"onToggleKeydown($event)\">\n  @if (hasIconLayout()) {\n    <eds-icon icon=\"globe\" size=\"s\" />\n    <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n  } @else {\n    <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n    <eds-icon [icon]=\"isOpen() ? 'caret-up' : 'caret-down'\" size=\"s\" />\n  }\n</button>\n\n@if (isOpen()) {\n  <ul\n    class=\"language-dropdown\"\n    [class.language-dropdown--align-right]=\"resolvedAlignRight()\"\n    role=\"listbox\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    (keydown)=\"onDropdownKeydown($event)\">\n    @for (lang of languages(); track lang.code; let i = $index) {\n      <li\n        class=\"language-option\"\n        [class.selected]=\"lang.code === selectedLanguage()\"\n        [class.focused]=\"i === focusedIndex()\"\n        role=\"option\"\n        [id]=\"'eds-lang-option-' + lang.code\"\n        [attr.aria-selected]=\"lang.code === selectedLanguage()\"\n        [tabindex]=\"i === focusedIndex() ? 0 : -1\"\n        (click)=\"selectLanguage(lang)\">\n        <span class=\"option-code\">{{ lang.code | uppercase }}</span>\n        <span class=\"option-label\">{{ lang.label }}</span>\n      </li>\n    }\n  </ul>\n}\n", styles: [".eui-21 :host{display:inline-flex;position:relative}.eui-21 :host .language-toggle{display:flex;align-items:center;gap:var(--eds-sp-3xs);padding:var(--eds-sp-3xs) var(--eds-sp-xs);border:var(--eds-bw-xs) solid var(--eds-c-border-neutral-subtle);border-radius:var(--eds-br-s);background:none;cursor:pointer;font:var(--eds-f-label-m-semibold);color:inherit;transition:background .15s ease,border-color .15s ease}.eui-21 :host .language-toggle:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host .language-toggle:hover{background:var(--eds-c-surface-elevation-sunken);border-color:var(--eds-c-border-neutral)}.eui-21 :host .language-toggle--icon-layout{border:none;padding:var(--eds-sp-3xs) var(--eds-sp-2xs);gap:var(--eds-sp-3xs);border-radius:var(--eds-br-s)}.eui-21 :host .language-toggle--icon-layout:hover{background:var(--eds-c-surface-elevation-sunken)}.eui-21 :host .language-code{font:var(--eds-f-label-m-semibold)}.eui-21 :host .chevron{font-size:var(--eds-f-s-xs);color:var(--eds-c-foreground-subtler)}.eui-21 :host .language-dropdown{position:absolute;top:100%;left:0;z-index:200;margin-top:var(--eds-sp-3xs);min-width:160px;list-style:none;padding:var(--eds-sp-3xs) var(--eds-sp-none);background:var(--eds-c-surface-elevation-overlay);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-3)}.eui-21 :host .language-dropdown--align-right{left:auto;right:0}.eui-21 :host .language-option{display:flex;align-items:center;gap:var(--eds-sp-xs);padding:var(--eds-sp-xs) var(--eds-sp-m);cursor:pointer;font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground);transition:background .15s ease;outline:none}.eui-21 :host .language-option:hover,.eui-21 :host .language-option.focused{background:var(--eds-c-surface-elevation-sunken)}.eui-21 :host .language-option.focused{outline:var(--eds-bw-xs) solid var(--eds-c-border-primary);outline-offset:-1px}.eui-21 :host .language-option.selected{color:var(--eds-c-foreground-primary);font-weight:var(--eds-f-w-semibold)}.eui-21 :host .option-code{font:var(--eds-f-label-m-semibold);min-width:2rem}.eui-21 :host .option-label{flex:1}.eui-21 :host.eds-language-selector--brand .language-toggle{color:var(--eds-c-on-surface-brand);border-color:transparent}.eui-21 :host.eds-language-selector--brand .language-toggle:hover{background:var(--eds-c-surface-brand--hover);color:var(--eds-c-on-surface-brand--hover)}.eui-21 :host.eds-language-selector--brand .language-toggle--icon-layout:hover{background:var(--eds-c-surface-brand--hover);color:var(--eds-c-on-surface-brand--hover)}.eui-21 :host.eds-language-selector--brand .language-toggle ::ng-deep eds-icon{--_eds-icon-on-surface: var(--eds-c-on-surface-brand)}.eui-21 :host.eds-language-selector--brand .chevron{color:var(--eds-c-on-surface-brand)}\n"], dependencies: [{ kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsLanguageSelector, decorators: [{
             type: Component,
@@ -317,7 +317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                                 'edsColorVariant',
                             ],
                         },
-                    ], template: "<button\n  type=\"button\"\n  class=\"language-toggle\"\n  [class.language-toggle--icon-layout]=\"hasIconLayout()\"\n  [attr.aria-label]=\"computedAriaLabel()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  aria-haspopup=\"listbox\"\n  (click)=\"toggle()\"\n  (keydown)=\"onToggleKeydown($event)\">\n  @if (hasIconLayout()) {\n    <eds-icon icon=\"globe\" size=\"s\" />\n    <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n  } @else {\n    <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n    <eds-icon [icon]=\"isOpen() ? 'caret-up' : 'caret-down'\" size=\"s\" />\n  }\n</button>\n\n@if (isOpen()) {\n  <ul\n    class=\"language-dropdown\"\n    [class.language-dropdown--align-right]=\"resolvedAlignRight()\"\n    role=\"listbox\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    (keydown)=\"onDropdownKeydown($event)\">\n    @for (lang of languages(); track lang.code; let i = $index) {\n      <li\n        class=\"language-option\"\n        [class.selected]=\"lang.code === selectedLanguage()\"\n        [class.focused]=\"i === focusedIndex()\"\n        role=\"option\"\n        [id]=\"'eds-lang-option-' + lang.code\"\n        [attr.aria-selected]=\"lang.code === selectedLanguage()\"\n        [tabindex]=\"i === focusedIndex() ? 0 : -1\"\n        (click)=\"selectLanguage(lang)\">\n        <span class=\"option-code\">{{ lang.code | uppercase }}</span>\n        <span class=\"option-label\">{{ lang.label }}</span>\n      </li>\n    }\n  </ul>\n}\n", styles: [".eui-21 :host{display:inline-flex;position:relative}.eui-21 :host .language-toggle{display:flex;align-items:center;gap:var(--eds-sp-3xs);padding:var(--eds-sp-3xs) var(--eds-sp-xs);border:var(--eds-bw-xs) solid var(--eds-c-border-neutral-subtle);border-radius:var(--eds-br-s);background:none;cursor:pointer;font:var(--eds-f-label-m-semibold);color:inherit;transition:background .15s ease,border-color .15s ease}.eui-21 :host .language-toggle:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host .language-toggle:hover{background:var(--eds-c-surface-elevation-sunken);border-color:var(--eds-c-border-neutral)}.eui-21 :host .language-toggle--icon-layout{border:none;padding:var(--eds-sp-3xs) var(--eds-sp-2xs);gap:var(--eds-sp-3xs);border-radius:var(--eds-br-s)}.eui-21 :host .language-toggle--icon-layout:hover{background:var(--eds-c-surface-elevation-sunken)}.eui-21 :host .language-code{font:var(--eds-f-label-m-semibold)}.eui-21 :host .chevron{font-size:var(--eds-f-s-xs);color:var(--eds-c-foreground-subtler)}.eui-21 :host .language-dropdown{position:absolute;top:100%;left:0;z-index:200;margin-top:var(--eds-sp-3xs);min-width:160px;list-style:none;padding:var(--eds-sp-3xs) var(--eds-sp-none);background:var(--eds-c-surface-elevation-overlay);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-3)}.eui-21 :host .language-dropdown--align-right{left:auto;right:0}.eui-21 :host .language-option{display:flex;align-items:center;gap:var(--eds-sp-xs);padding:var(--eds-sp-xs) var(--eds-sp-m);cursor:pointer;font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground);transition:background .15s ease;outline:none}.eui-21 :host .language-option:hover,.eui-21 :host .language-option.focused{background:var(--eds-c-surface-elevation-sunken)}.eui-21 :host .language-option.focused{outline:var(--eds-bw-xs) solid var(--eds-c-border-primary);outline-offset:-1px}.eui-21 :host .language-option.selected{color:var(--eds-c-foreground-primary);font-weight:var(--eds-f-w-semibold)}.eui-21 :host .option-code{font:var(--eds-f-label-m-semibold);min-width:2rem}.eui-21 :host .option-label{flex:1}.eui-21 :host.eds-language-selector--brand .language-toggle{color:var(--eds-c-on-surface-brand);border-color:transparent}.eui-21 :host.eds-language-selector--brand .language-toggle:hover{background:var(--eds-c-surface-brand--hover);color:var(--eds-c-on-surface-brand--hover)}.eui-21 :host.eds-language-selector--brand .language-toggle--icon-layout:hover{background:var(--eds-c-surface-brand--hover);color:var(--eds-c-on-surface-brand--hover)}.eui-21 :host.eds-language-selector--brand .language-toggle ::ng-deep .eds-icon{--_on-surface: var(--eds-c-on-surface-brand)}.eui-21 :host.eds-language-selector--brand .chevron{color:var(--eds-c-on-surface-brand)}\n"] }]
+                    ], template: "<button\n  type=\"button\"\n  class=\"language-toggle\"\n  [class.language-toggle--icon-layout]=\"hasIconLayout()\"\n  [attr.aria-label]=\"computedAriaLabel()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  aria-haspopup=\"listbox\"\n  (click)=\"toggle()\"\n  (keydown)=\"onToggleKeydown($event)\">\n  @if (hasIconLayout()) {\n    <eds-icon icon=\"globe\" size=\"s\" />\n    <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n  } @else {\n    <span class=\"language-code\">{{ currentLanguage().code | uppercase }}</span>\n    <eds-icon [icon]=\"isOpen() ? 'caret-up' : 'caret-down'\" size=\"s\" />\n  }\n</button>\n\n@if (isOpen()) {\n  <ul\n    class=\"language-dropdown\"\n    [class.language-dropdown--align-right]=\"resolvedAlignRight()\"\n    role=\"listbox\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    (keydown)=\"onDropdownKeydown($event)\">\n    @for (lang of languages(); track lang.code; let i = $index) {\n      <li\n        class=\"language-option\"\n        [class.selected]=\"lang.code === selectedLanguage()\"\n        [class.focused]=\"i === focusedIndex()\"\n        role=\"option\"\n        [id]=\"'eds-lang-option-' + lang.code\"\n        [attr.aria-selected]=\"lang.code === selectedLanguage()\"\n        [tabindex]=\"i === focusedIndex() ? 0 : -1\"\n        (click)=\"selectLanguage(lang)\">\n        <span class=\"option-code\">{{ lang.code | uppercase }}</span>\n        <span class=\"option-label\">{{ lang.label }}</span>\n      </li>\n    }\n  </ul>\n}\n", styles: [".eui-21 :host{display:inline-flex;position:relative}.eui-21 :host .language-toggle{display:flex;align-items:center;gap:var(--eds-sp-3xs);padding:var(--eds-sp-3xs) var(--eds-sp-xs);border:var(--eds-bw-xs) solid var(--eds-c-border-neutral-subtle);border-radius:var(--eds-br-s);background:none;cursor:pointer;font:var(--eds-f-label-m-semibold);color:inherit;transition:background .15s ease,border-color .15s ease}.eui-21 :host .language-toggle:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host .language-toggle:hover{background:var(--eds-c-surface-elevation-sunken);border-color:var(--eds-c-border-neutral)}.eui-21 :host .language-toggle--icon-layout{border:none;padding:var(--eds-sp-3xs) var(--eds-sp-2xs);gap:var(--eds-sp-3xs);border-radius:var(--eds-br-s)}.eui-21 :host .language-toggle--icon-layout:hover{background:var(--eds-c-surface-elevation-sunken)}.eui-21 :host .language-code{font:var(--eds-f-label-m-semibold)}.eui-21 :host .chevron{font-size:var(--eds-f-s-xs);color:var(--eds-c-foreground-subtler)}.eui-21 :host .language-dropdown{position:absolute;top:100%;left:0;z-index:200;margin-top:var(--eds-sp-3xs);min-width:160px;list-style:none;padding:var(--eds-sp-3xs) var(--eds-sp-none);background:var(--eds-c-surface-elevation-overlay);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-3)}.eui-21 :host .language-dropdown--align-right{left:auto;right:0}.eui-21 :host .language-option{display:flex;align-items:center;gap:var(--eds-sp-xs);padding:var(--eds-sp-xs) var(--eds-sp-m);cursor:pointer;font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground);transition:background .15s ease;outline:none}.eui-21 :host .language-option:hover,.eui-21 :host .language-option.focused{background:var(--eds-c-surface-elevation-sunken)}.eui-21 :host .language-option.focused{outline:var(--eds-bw-xs) solid var(--eds-c-border-primary);outline-offset:-1px}.eui-21 :host .language-option.selected{color:var(--eds-c-foreground-primary);font-weight:var(--eds-f-w-semibold)}.eui-21 :host .option-code{font:var(--eds-f-label-m-semibold);min-width:2rem}.eui-21 :host .option-label{flex:1}.eui-21 :host.eds-language-selector--brand .language-toggle{color:var(--eds-c-on-surface-brand);border-color:transparent}.eui-21 :host.eds-language-selector--brand .language-toggle:hover{background:var(--eds-c-surface-brand--hover);color:var(--eds-c-on-surface-brand--hover)}.eui-21 :host.eds-language-selector--brand .language-toggle--icon-layout:hover{background:var(--eds-c-surface-brand--hover);color:var(--eds-c-on-surface-brand--hover)}.eui-21 :host.eds-language-selector--brand .language-toggle ::ng-deep eds-icon{--_eds-icon-on-surface: var(--eds-c-on-surface-brand)}.eui-21 :host.eds-language-selector--brand .chevron{color:var(--eds-c-on-surface-brand)}\n"] }]
         }], propDecorators: { languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], selectedLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedLanguage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], isRightAligned: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRightAligned", required: false }] }], hasIconLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasIconLayout", required: false }] }], languageChange: [{ type: i0.Output, args: ["languageChange"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]