@eui/eds-wc 22.0.0-alpha.5 → 22.0.0-alpha.6

package/eds-alert/eds-wc-alert.d.ts

@@ -1,10 +1,16 @@
 import { EdsBaseElement } from '../shared/eds-base.js';
-declare const EdsWcAlert_base: (new (...args: any[]) => import("../shared/color-mixin.js").ColorMixinInterface) & typeof EdsBaseElement;
+/**
+ * Local narrowed color union — the alert's color contract. Copied verbatim from the
+ * Angular `eds-alert` exported `EdsAlertColor` union. No shared-token import.
+ */
+export type EdsWcAlertColor = 'info' | 'success' | 'warning' | 'critical';
 /**
  * `<eds-wc-alert>` — EDS Alert Web Component.
  *
- * An alert banner with color-coded left border, status icon, title slot,
- * default content slot, and optional close button.
+ * 1:1 projection of the Angular `eds-alert`. An alert banner with a color-coded left
+ * border, a semantic status icon, a title slot, a default content slot, and an optional
+ * close button. The host carries `role="alert"`; visibility is controlled via the
+ * reflected `hidden` attribute (matching the Angular `[attr.hidden]` host binding).
  *
  * @example
  * ```html
@@ -13,45 +19,62 @@ declare const EdsWcAlert_base: (new (...args: any[]) => import("../shared/color-
  *   This is an informational message.
  * </eds-wc-alert>
  *
- * <eds-wc-alert color="warning" closeable close-aria-label="Dismiss">
+ * <eds-wc-alert color="warning" is-closeable close-aria-label="Dismiss">
  *   Something needs your attention.
  * </eds-wc-alert>
  * ```
  *
- * @slot title - Alert title (rendered in semi-bold)
- * @slot - Default slot for alert body content
+ * @slot title - Alert title (rendered in semi-bold), mirrors `<ng-content select="eds-alert-title">`.
+ * @slot - Default slot for the alert body content.
  *
- * @fires close - Dispatched when the close button is clicked. The alert hides itself.
+ * @fires close-alert - Dispatched when the close button is clicked; the alert hides itself. `detail: { visible: false }`.
  *
- * @csspart icon - The status icon container
- * @csspart content - The content area (title + body)
- * @csspart close-button - The close button (when closeable)
+ * @csspart icon - The status icon container.
+ * @csspart content - The content area (title + body).
+ * @csspart close-button - The close button (only rendered when `is-closeable`).
  */
-export declare class EdsWcAlert extends EdsWcAlert_base {
+export declare class EdsWcAlert extends EdsBaseElement {
+    /**
+     * Semantic color of the alert.
+     * @default 'info'
+     */
+    color: EdsWcAlertColor;
     /**
-     * Whether a close button is shown.
-     * When clicked, the alert hides and dispatches a `close` event.
+     * Enables a close button allowing users to dismiss the alert.
+     * When set, displays a close icon button that hides the alert and dispatches `close-alert`.
+     * @default false
      */
-    closeable: boolean;
+    isCloseable: boolean;
     /**
-     * Controls visibility. Set to `false` to hide the alert.
-     * Also set automatically when the close button is clicked.
+     * Controls the visibility state of the alert. When `false`, the host reflects the
+     * `hidden` attribute (matching the Angular `[attr.hidden]` binding) and is not rendered.
+     * @default true
      */
-    visible: boolean;
+    isVisible: boolean;
     /**
-     * ARIA label for the close button.
+     * ARIA label for the close button, allowing localization.
      * @default 'Close alert'
      */
     closeAriaLabel: string;
+    /**
+     * Data attribute value for end-to-end testing identification.
+     * Applied as the `data-e2e` attribute on the host element.
+     * @default 'eds-alert'
+     */
+    e2eAttr: string;
     static styles: import("lit").CSSResult;
     protected render(): import("lit-html").TemplateResult<1>;
-    protected updated(): void;
-    private _onClose;
+    protected updated(changed: Map<string, unknown>): void;
+    connectedCallback(): void;
+    /**
+     * Hides the alert and dispatches the `close-alert` event when the close button is clicked.
+     * Mirrors the Angular `onCloseClick()` which sets `isVisible=false` and emits `closeAlert(false)`.
+     */
+    private _onCloseClick;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'eds-wc-alert': EdsWcAlert;
     }
 }
-export {};
 //# sourceMappingURL=eds-wc-alert.d.ts.map

package/eds-alert/eds-wc-alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eds-wc-alert.d.ts","sourceRoot":"","sources":["../../src/eds-alert/eds-wc-alert.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;;AAWvD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,UAAW,SAAQ,eAA0B;IACtD;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,OAAO,UAAQ;IAEf;;;OAGG;IAEH,cAAc,SAAiB;IAE/B,OAAgB,MAAM,0BAkGpB;cAEiB,MAAM;cAoCN,OAAO,IAAI,IAAI;IAIlC,OAAO,CAAC,QAAQ;CAQnB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,cAAc,EAAE,UAAU,CAAC;KAC9B;CACJ"}
+{"version":3,"file":"eds-wc-alert.d.ts","sourceRoot":"","sources":["../../src/eds-alert/eds-wc-alert.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAkB1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,UAAW,SAAQ,cAAc;IAC1C;;;OAGG;IAEH,KAAK,EAAE,eAAe,CAAU;IAEhC;;;;OAIG;IAEH,WAAW,UAAS;IAEpB;;;;OAIG;IAEH,SAAS,UAAQ;IAEjB;;;OAGG;IAEH,cAAc,SAAiB;IAE/B;;;;OAIG;IAEH,OAAO,SAAe;IAEtB,OAAgB,MAAM,0BAwHpB;cAEiB,MAAM;cAoCN,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOtD,iBAAiB,IAAI,IAAI;IAMlC;;;OAGG;IACH,OAAO,CAAC,aAAa;CAQxB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,cAAc,EAAE,UAAU,CAAC;KAC9B;CACJ"}

package/eds-alert/eds-wc-alert.js

@@ -7,19 +7,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { EdsBaseElement } from '../shared/eds-base.js';
-import { ColorMixin } from '../shared/color-mixin.js';
-/** Map from alert color to its corresponding semantic icon name. */
 const ALERT_ICON_MAP = {
-    info: 'info',
-    success: 'check-circle',
-    warning: 'warning',
-    critical: 'warning-circle',
+    info: { name: 'info', ariaLabel: 'EDS info icon' },
+    success: { name: 'check-circle', ariaLabel: 'EDS success icon' },
+    warning: { name: 'warning', ariaLabel: 'EDS warning icon' },
+    critical: { name: 'warning-circle', ariaLabel: 'EDS danger icon' },
 };
 /**
  * `<eds-wc-alert>` — EDS Alert Web Component.
  *
- * An alert banner with color-coded left border, status icon, title slot,
- * default content slot, and optional close button.
+ * 1:1 projection of the Angular `eds-alert`. An alert banner with a color-coded left
+ * border, a semantic status icon, a title slot, a default content slot, and an optional
+ * close button. The host carries `role="alert"`; visibility is controlled via the
+ * reflected `hidden` attribute (matching the Angular `[attr.hidden]` host binding).
  *
  * @example
  * ```html
@@ -28,95 +28,99 @@ const ALERT_ICON_MAP = {
  *   This is an informational message.
  * </eds-wc-alert>
  *
- * <eds-wc-alert color="warning" closeable close-aria-label="Dismiss">
+ * <eds-wc-alert color="warning" is-closeable close-aria-label="Dismiss">
  *   Something needs your attention.
  * </eds-wc-alert>
  * ```
  *
- * @slot title - Alert title (rendered in semi-bold)
- * @slot - Default slot for alert body content
+ * @slot title - Alert title (rendered in semi-bold), mirrors `<ng-content select="eds-alert-title">`.
+ * @slot - Default slot for the alert body content.
  *
- * @fires close - Dispatched when the close button is clicked. The alert hides itself.
+ * @fires close-alert - Dispatched when the close button is clicked; the alert hides itself. `detail: { visible: false }`.
  *
- * @csspart icon - The status icon container
- * @csspart content - The content area (title + body)
- * @csspart close-button - The close button (when closeable)
+ * @csspart icon - The status icon container.
+ * @csspart content - The content area (title + body).
+ * @csspart close-button - The close button (only rendered when `is-closeable`).
  */
-let EdsWcAlert = class EdsWcAlert extends ColorMixin(EdsBaseElement) {
+let EdsWcAlert = class EdsWcAlert extends EdsBaseElement {
     constructor() {
         super(...arguments);
         /**
-         * Whether a close button is shown.
-         * When clicked, the alert hides and dispatches a `close` event.
+         * Semantic color of the alert.
+         * @default 'info'
          */
-        this.closeable = false;
+        this.color = 'info';
         /**
-         * Controls visibility. Set to `false` to hide the alert.
-         * Also set automatically when the close button is clicked.
+         * Enables a close button allowing users to dismiss the alert.
+         * When set, displays a close icon button that hides the alert and dispatches `close-alert`.
+         * @default false
          */
-        this.visible = true;
+        this.isCloseable = false;
         /**
-         * ARIA label for the close button.
+         * Controls the visibility state of the alert. When `false`, the host reflects the
+         * `hidden` attribute (matching the Angular `[attr.hidden]` binding) and is not rendered.
+         * @default true
+         */
+        this.isVisible = true;
+        /**
+         * ARIA label for the close button, allowing localization.
          * @default 'Close alert'
          */
         this.closeAriaLabel = 'Close alert';
+        /**
+         * Data attribute value for end-to-end testing identification.
+         * Applied as the `data-e2e` attribute on the host element.
+         * @default 'eds-alert'
+         */
+        this.e2eAttr = 'eds-alert';
     }
     static { this.styles = css `
+        :host, *, *::before, *::after {
+            box-sizing: border-box;
+        }
+
         :host {
+            /* default color = info */
+            --_eds-alert-surface: var(--eds-c-surface-info-subtler);
+            --_eds-alert-on-surface: var(--eds-c-on-surface-info-subtler);
+            --_eds-alert-border-color: var(--eds-c-border-info);
+
             display: flex;
             width: 100%;
+            background-color: var(--_eds-alert-surface);
             padding: var(--eds-sp-s);
             border-radius: var(--eds-br-s);
-            border-left: var(--eds-bw-m) solid var(--_border-color);
-            background-color: var(--_surface);
+            border-left: var(--eds-bw-m) solid var(--_eds-alert-border-color);
         }
 
-        :host([visible="false"]),
-        :host(:not([visible])) {
+        :host([hidden]) {
             display: none;
         }
 
-        /* Ensure visible=true shows */
-        :host([visible]) {
+        .eds-alert__icon {
+            flex-shrink: 0;
             display: flex;
         }
 
-        /* Color variants */
-        :host([color="info"]) {
-            --_surface: var(--eds-c-surface-info-subtler);
-            --_on-surface: var(--eds-c-on-surface-info-subtler);
-            --_border-color: var(--eds-c-border-info);
-            --_icon-color: var(--eds-c-foreground-info);
-        }
-        :host([color="success"]) {
-            --_surface: var(--eds-c-surface-success-subtler);
-            --_on-surface: var(--eds-c-on-surface-success-subtler);
-            --_border-color: var(--eds-c-border-success);
-            --_icon-color: var(--eds-c-foreground-success);
+        .eds-alert__icon svg {
+            width: var(--eds-is-m);
+            height: var(--eds-is-m);
         }
-        :host([color="warning"]) {
-            --_surface: var(--eds-c-surface-warning-subtler);
-            --_on-surface: var(--eds-c-on-surface-warning-subtler);
-            --_border-color: var(--eds-c-border-warning);
-            --_icon-color: var(--eds-c-foreground-warning);
+
+        :host([color="info"]) .eds-alert__icon svg {
+            fill: var(--eds-c-foreground-info);
         }
-        :host([color="critical"]) {
-            --_surface: var(--eds-c-surface-critical-subtler);
-            --_on-surface: var(--eds-c-on-surface-critical-subtler);
-            --_border-color: var(--eds-c-border-critical);
-            --_icon-color: var(--eds-c-foreground-critical);
+
+        :host([color="success"]) .eds-alert__icon svg {
+            fill: var(--eds-c-foreground-success);
         }
 
-        .eds-alert__icon {
-            flex-shrink: 0;
-            display: inline-flex;
-            color: var(--_icon-color);
+        :host([color="warning"]) .eds-alert__icon svg {
+            fill: var(--eds-c-foreground-warning);
         }
 
-        .eds-alert__icon svg {
-            width: var(--eds-is-m);
-            height: var(--eds-is-m);
-            fill: var(--_icon-color);
+        :host([color="critical"]) .eds-alert__icon svg {
+            fill: var(--eds-c-foreground-critical);
         }
 
         .eds-alert__content {
@@ -125,7 +129,6 @@ let EdsWcAlert = class EdsWcAlert extends ColorMixin(EdsBaseElement) {
             flex-direction: column;
             padding: 0 var(--eds-sp-xs);
             font: var(--eds-f-paragraph-m);
-            color: var(--_on-surface);
         }
 
         ::slotted([slot="title"]) {
@@ -136,22 +139,22 @@ let EdsWcAlert = class EdsWcAlert extends ColorMixin(EdsBaseElement) {
             margin-left: auto;
             display: flex;
             align-self: baseline;
+            padding: var(--eds-sp-3xs);
             background: none;
             border: none;
+            border-radius: var(--eds-br-full);
             cursor: pointer;
-            padding: var(--eds-sp-3xs);
-            border-radius: var(--eds-br-s);
-            color: var(--_on-surface);
+            color: var(--eds-c-on-surface-neutral-subtler);
             line-height: 0;
         }
 
         .eds-alert__close:hover {
-            background-color: color-mix(in srgb, var(--_on-surface) 10%, transparent);
+            background-color: var(--eds-c-surface-neutral-subtler);
         }
 
         .eds-alert__close:focus-visible {
-            outline: 2px solid var(--eds-c-border-focus);
-            outline-offset: 2px;
+            outline: var(--eds-bw-s) solid var(--eds-c-border-focus);
+            outline-offset: var(--eds-sp-4xs);
         }
 
         .eds-alert__close svg {
@@ -159,16 +162,49 @@ let EdsWcAlert = class EdsWcAlert extends ColorMixin(EdsBaseElement) {
             height: var(--eds-is-s);
             fill: currentColor;
         }
+
+        /* COLOR VARIANTS */
+        :host([color="info"]) {
+            --_eds-alert-surface: var(--eds-c-surface-info-subtler);
+            --_eds-alert-on-surface: var(--eds-c-on-surface-info-subtler);
+            --_eds-alert-border-color: var(--eds-c-border-info);
+        }
+
+        :host([color="success"]) {
+            --_eds-alert-surface: var(--eds-c-surface-success-subtler);
+            --_eds-alert-on-surface: var(--eds-c-on-surface-success-subtler);
+            --_eds-alert-border-color: var(--eds-c-border-success);
+        }
+
+        :host([color="warning"]) {
+            --_eds-alert-surface: var(--eds-c-surface-warning-subtler);
+            --_eds-alert-on-surface: var(--eds-c-on-surface-warning-subtler);
+            --_eds-alert-border-color: var(--eds-c-border-warning);
+        }
+
+        :host([color="critical"]) {
+            --_eds-alert-surface: var(--eds-c-surface-critical-subtler);
+            --_eds-alert-on-surface: var(--eds-c-on-surface-critical-subtler);
+            --_eds-alert-border-color: var(--eds-c-border-critical);
+        }
+
+        /* MOBILE BREAKPOINT (< 768px) */
+        @media (max-width: 767px) {
+            .eds-alert__content {
+                font: var(--eds-f-paragraph-s);
+            }
+        }
     `; }
     render() {
-        const resolvedColor = this.color || 'info';
-        const iconName = ALERT_ICON_MAP[resolvedColor] || 'info';
+        const resolvedColor = ALERT_ICON_MAP[this.color] ? this.color : 'info';
+        const icon = ALERT_ICON_MAP[resolvedColor];
         const baseUrl = EdsBaseElement.assetsBaseUrl;
-        const spriteHref = `${baseUrl}/eds/icons/sprites/regular.svg#${iconName}`;
+        const iconHref = `${baseUrl}/eds/icons/sprites/core.svg#${icon.name}`;
+        const closeHref = `${baseUrl}/eds/icons/sprites/core.svg#x`;
         return html `
-            <span class="eds-alert__icon" part="icon" aria-hidden="true">
-                <svg aria-hidden="true">
-                    <use href="${spriteHref}"></use>
+            <span class="eds-alert__icon" part="icon">
+                <svg role="img" aria-label="${icon.ariaLabel}">
+                    <use href="${iconHref}"></use>
                 </svg>
             </span>
 
@@ -177,28 +213,40 @@ let EdsWcAlert = class EdsWcAlert extends ColorMixin(EdsBaseElement) {
                 <slot></slot>
             </div>
 
-            ${this.closeable
+            ${this.isCloseable
             ? html `
                     <button
                         type="button"
                         class="eds-alert__close"
                         part="close-button"
                         aria-label="${this.closeAriaLabel}"
-                        @click="${this._onClose}">
+                        @click="${this._onCloseClick}">
                         <svg aria-hidden="true">
-                            <use href="${baseUrl}/eds/icons/sprites/core.svg#x"></use>
+                            <use href="${closeHref}"></use>
                         </svg>
                     </button>
                 `
             : nothing}
         `;
     }
-    updated() {
+    updated(changed) {
+        if (changed.has('isVisible')) {
+            // Mirror the Angular `[attr.hidden]='!isVisible() || null'` host binding.
+            this.toggleAttribute('hidden', !this.isVisible);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this.setAttribute('role', 'alert');
+        this.toggleAttribute('hidden', !this.isVisible);
     }
-    _onClose() {
-        this.visible = false;
-        this.dispatchEvent(new CustomEvent('close', {
+    /**
+     * Hides the alert and dispatches the `close-alert` event when the close button is clicked.
+     * Mirrors the Angular `onCloseClick()` which sets `isVisible=false` and emits `closeAlert(false)`.
+     */
+    _onCloseClick() {
+        this.isVisible = false;
+        this.dispatchEvent(new CustomEvent('close-alert', {
             bubbles: true,
             composed: true,
             detail: { visible: false },
@@ -206,14 +254,20 @@ let EdsWcAlert = class EdsWcAlert extends ColorMixin(EdsBaseElement) {
     }
 };
 __decorate([
-    property({ type: Boolean, reflect: true })
-], EdsWcAlert.prototype, "closeable", void 0);
+    property({ type: String, reflect: true })
+], EdsWcAlert.prototype, "color", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], EdsWcAlert.prototype, "visible", void 0);
+    property({ type: Boolean, reflect: true, attribute: 'is-closeable' })
+], EdsWcAlert.prototype, "isCloseable", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-visible' })
+], EdsWcAlert.prototype, "isVisible", void 0);
 __decorate([
     property({ type: String, attribute: 'close-aria-label' })
 ], EdsWcAlert.prototype, "closeAriaLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'data-e2e' })
+], EdsWcAlert.prototype, "e2eAttr", void 0);
 EdsWcAlert = __decorate([
     customElement('eds-wc-alert')
 ], EdsWcAlert);

package/eds-alert/eds-wc-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"eds-wc-alert.js","sourceRoot":"","sources":["../../src/eds-alert/eds-wc-alert.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,oEAAoE;AACpE,MAAM,cAAc,GAA2B;IAC3C,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,gBAAgB;CAC7B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU,CAAC,cAAc,CAAC;IAAnD;;QACH;;;WAGG;QAEH,cAAS,GAAG,KAAK,CAAC;QAElB;;;WAGG;QAEH,YAAO,GAAG,IAAI,CAAC;QAEf;;;WAGG;QAEH,mBAAc,GAAG,aAAa,CAAC;IAsJnC,CAAC;aApJmB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkG3B,AAlGqB,CAkGpB;IAEiB,MAAM;QACrB,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC;QAC3C,MAAM,QAAQ,GAAG,cAAc,CAAC,aAAa,CAAC,IAAI,MAAM,CAAC;QACzD,MAAM,OAAO,GAAG,cAAc,CAAC,aAAa,CAAC;QAC7C,MAAM,UAAU,GAAG,GAAG,OAAO,kCAAkC,QAAQ,EAAE,CAAC;QAE1E,OAAO,IAAI,CAAA;;;iCAGc,UAAU;;;;;;;;;cAS7B,IAAI,CAAC,SAAS;YACZ,CAAC,CAAC,IAAI,CAAA;;;;;sCAKgB,IAAI,CAAC,cAAc;kCACvB,IAAI,CAAC,QAAQ;;yCAEN,OAAO;;;iBAG/B;YACD,CAAC,CAAC,OACN;SACH,CAAC;IACN,CAAC;IAEkB,OAAO;QACtB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,CAAC;IAEO,QAAQ;QACZ,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE;YACxC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;SAC7B,CAAC,CAAC,CAAC;IACR,CAAC;;AAnKD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACzB;AAOlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC5B;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;kDAC3B;AApBtB,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CA0KtB"}
+{"version":3,"file":"eds-wc-alert.js","sourceRoot":"","sources":["../../src/eds-alert/eds-wc-alert.ts"],"names":[],"mappings":"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"}

package/eds-alert/index.d.ts

@@ -1,2 +1,3 @@
 export { EdsWcAlert } from './eds-wc-alert.js';
+export type { EdsWcAlertColor } from './eds-wc-alert.js';
 //# sourceMappingURL=index.d.ts.map

package/eds-alert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/eds-badge/eds-wc-badge.d.ts

@@ -1,51 +1,91 @@
 import { EdsBaseElement } from '../shared/eds-base.js';
-declare const EdsWcBadge_base: (new (...args: any[]) => import("../shared/size-mixin.js").SizeMixinInterface) & (new (...args: any[]) => import("../shared/color-mixin.js").ColorMixinInterface) & typeof EdsBaseElement;
+/**
+ * Local narrowed unions — the badge's variant contract. Copied verbatim from the
+ * Angular `eds-badge` exported unions. No shared-token import.
+ */
+export type EdsWcBadgeColor = 'primary' | 'neutral' | 'success' | 'info' | 'warning' | 'critical';
+export type EdsWcBadgeVariant = 'filled' | 'outline';
+export type EdsWcBadgeSize = 's' | 'm';
 /**
  * `<eds-wc-badge>` — EDS Badge Web Component.
  *
- * A small status indicator supporting color variants, sizes,
- * outline, dotted, and icon-only modes. Can truncate numeric
- * content via `max-char-count`.
+ * A badge that displays text, numbers, or a dot indicator with semantic color, size,
+ * and variant styling. Supports content truncation via `max-char-count`, an automatic
+ * empty state (dot), and an icon-only mode. 1:1 projection of the Angular `eds-badge`.
  *
  * @example
  * ```html
- * <eds-wc-badge color="critical" size="m">5</eds-wc-badge>
- * <eds-wc-badge color="success" size="xs" dotted></eds-wc-badge>
- * <eds-wc-badge color="info" max-char-count="2" char-replacement="99+">128</eds-wc-badge>
+ * <eds-wc-badge>99</eds-wc-badge>
+ * <eds-wc-badge color="success">Active</eds-wc-badge>
+ * <eds-wc-badge color="info" variant="outline">New</eds-wc-badge>
+ * <eds-wc-badge max-char-count="2" char-replacement="99+">150</eds-wc-badge>
+ * <eds-wc-badge icon-only color="critical"></eds-wc-badge>
  * ```
  *
- * @slot - Badge content (text, number, or icon)
+ * @slot - Badge content (text, number). Empty content renders a dot indicator.
  */
-export declare class EdsWcBadge extends EdsWcBadge_base {
+export declare class EdsWcBadge extends EdsBaseElement {
+    /**
+     * Semantic color of the badge.
+     * @default 'neutral'
+     */
+    color: EdsWcBadgeColor;
+    /**
+     * Visual variant. `filled` uses a solid semantic surface; `outline` uses a
+     * transparent surface with a stronger border.
+     * @default 'filled'
+     */
+    variant: EdsWcBadgeVariant;
+    /**
+     * Size of the badge.
+     * @default 'm'
+     */
+    size: EdsWcBadgeSize;
     /**
-     * Maximum number of characters before truncating with `charReplacement`.
-     * Set to 0 to disable truncation.
+     * Whether the badge is a small dot indicator with no text content.
+     * @default false
+     */
+    iconOnly: boolean;
+    /**
+     * Maximum number of characters to display before truncating. When the content
+     * exceeds this limit it is replaced with `charReplacement`. `0` disables truncation.
+     * @default 0
      */
     maxCharCount: number;
     /**
-     * Replacement text shown when content exceeds `maxCharCount`.
-     * @default '99+'
+     * Text shown when the content is truncated by `maxCharCount`. Falls back to `'99+'`.
+     * @default ''
      */
     charReplacement: string;
-    /** Whether the badge is in icon-only mode (small dot indicator). */
-    iconOnly: boolean;
-    /** Whether to display the badge with dotted styling. */
-    dotted: boolean;
-    /** Whether to use outline styling. */
-    outline: boolean;
-    private _isEmpty;
-    private _truncatedContent;
+    /**
+     * Data attribute for e2e testing.
+     * @default 'eds-badge'
+     */
+    e2eAttr: string;
+    /**
+     * ARIA label for accessibility. When `null`, the visible content serves as the
+     * accessible name.
+     * @default 'badge'
+     */
+    ariaLabel: string | null;
+    /** Whether the projected content is empty (drives the dot/empty state). Reflected → `:host([empty])`. */
+    empty: boolean;
+    /** Whether the content was truncated by `maxCharCount`. */
     private _isTruncated;
+    /** The always-mounted content slot; queried so first render can evaluate empty/truncation. */
+    private _slot;
     static styles: import("lit").CSSResult;
     protected render(): import("lit-html").TemplateResult<1>;
     protected updated(): void;
+    protected firstUpdated(): void;
     private _onSlotChange;
-    private _checkContent;
+    /** Guarded computation of `empty` + `_isTruncated` from the slot's assigned content. */
+    private _evaluate;
+    private _computeTruncated;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'eds-wc-badge': EdsWcBadge;
     }
 }
-export {};
 //# sourceMappingURL=eds-wc-badge.d.ts.map

package/eds-badge/eds-wc-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eds-wc-badge.d.ts","sourceRoot":"","sources":["../../src/eds-badge/eds-wc-badge.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;;AAIvD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,UAAW,SAAQ,eAAqC;IACjE;;;OAGG;IAEH,YAAY,SAAK;IAEjB;;;OAGG;IAEH,eAAe,SAAM;IAErB,oEAAoE;IAEpE,QAAQ,UAAS;IAEjB,wDAAwD;IAExD,MAAM,UAAS;IAEf,sCAAsC;IAEtC,OAAO,UAAS;IAGhB,OAAO,CAAC,QAAQ,CAAS;IAGzB,OAAO,CAAC,iBAAiB,CAAM;IAG/B,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAgB,MAAM,0BA2DpB;cAEiB,MAAM;cAON,OAAO,IAAI,IAAI;IAYlC,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,aAAa;CASxB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,cAAc,EAAE,UAAU,CAAC;KAC9B;CACJ"}
+{"version":3,"file":"eds-wc-badge.d.ts","sourceRoot":"","sources":["../../src/eds-badge/eds-wc-badge.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;AAClG,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,SAAS,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,GAAG,GAAG,GAAG,CAAC;AAEvC;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,UAAW,SAAQ,cAAc;IAC1C;;;OAGG;IAEH,KAAK,EAAE,eAAe,CAAa;IAEnC;;;;OAIG;IAEH,OAAO,EAAE,iBAAiB,CAAY;IAEtC;;;OAGG;IAEH,IAAI,EAAE,cAAc,CAAO;IAE3B;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,YAAY,SAAK;IAEjB;;;OAGG;IAEH,eAAe,SAAM;IAErB;;;OAGG;IAEH,OAAO,SAAe;IAEtB;;;;OAIG;IAEH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAW;IAEnC,yGAAyG;IAEzG,KAAK,UAAS;IAEd,2DAA2D;IAE3D,OAAO,CAAC,YAAY,CAAS;IAE7B,8FAA8F;IAE9F,OAAO,CAAC,KAAK,CAAmB;IAEhC,OAAgB,MAAM,0BAuHpB;cAEiB,MAAM;cAMN,OAAO,IAAI,IAAI;cAIf,YAAY,IAAI,IAAI;IAMvC,OAAO,CAAC,aAAa;IAIrB,wFAAwF;IACxF,OAAO,CAAC,SAAS;IAmBjB,OAAO,CAAC,iBAAiB;CAO5B;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,cAAc,EAAE,UAAU,CAAC;KAC9B;CACJ"}