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

package/eds-icon-button/eds-wc-icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eds-wc-icon-button.d.ts","sourceRoot":"","sources":["../../src/eds-icon-button/eds-wc-icon-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;;AAIvD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,eAAgB,SAAQ,oBAAqC;IACtE,4DAA4D;IAE5D,IAAI,SAAM;IAEV,2CAA2C;IAElC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAiB;IAElD,2CAA2C;IAE3C,OAAO,UAAS;IAEhB,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,OAAO,KAAK,SAAS,GAGpB;IAED,OAAO,KAAK,YAAY,GAGvB;IAED,OAAgB,MAAM,0BAoEpB;cAEiB,MAAM;CAiB5B;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,eAAe,CAAC;KACzC;CACJ"}
+{"version":3,"file":"eds-wc-icon-button.d.ts","sourceRoot":"","sources":["../../src/eds-icon-button/eds-wc-icon-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,4BAA4B,CAAC;AAEpC;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAC1B,OAAO,GACP,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,CAAC;AAEjB;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,eAAgB,SAAQ,cAAc;IAC/C;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,KAAK,EAAE,oBAAoB,CAAa;IAExC;;;OAGG;IAEH,IAAI,EAAE,mBAAmB,CAAO;IAEhC;;;OAGG;IAEM,SAAS,EAAE,MAAM,GAAG,IAAI,CAAqB;IAEtD;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB,OAAgB,MAAM,0BA2HpB;cAEiB,MAAM;IAmBzB,OAAO,CAAC,QAAQ,CASd;CACL;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,eAAe,CAAC;KACzC;CACJ"}

package/eds-icon-button/eds-wc-icon-button.js

@@ -7,129 +7,214 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { EdsBaseElement } from '../shared/eds-base.js';
-import { ColorMixin } from '../shared/color-mixin.js';
-import { SizeMixin } from '../shared/size-mixin.js';
+import '../eds-icon/eds-wc-icon.js';
 /**
  * `<eds-wc-icon-button>` — EDS Icon Button Web Component.
  *
- * A button that renders a single icon from the EDS sprite sheet.
- * Supports size/color variants, rounded shape, and disabled state.
+ * A compact, icon-only button. Renders an internal native `<button>` (for keyboard/focus/click
+ * semantics) containing an `<eds-wc-icon>`. Supports semantic color and size via reflected string
+ * attributes, an optional rounded shape, and a disabled state. 1:1 projection of the Angular
+ * `button[edsIconButton]` directive.
+ *
+ * Unlike the Angular directive which decorates a consumer-provided native `<button>`, this web
+ * component renders its own internal `<button>` element and mirrors the same reflected attribute
+ * API on the host.
  *
  * @example
  * ```html
- * <eds-wc-icon-button icon="star" size="m" color="neutral"></eds-wc-icon-button>
- * <eds-wc-icon-button icon="x:core" rounded size="s" disabled></eds-wc-icon-button>
+ * <eds-wc-icon-button icon="gear" aria-label="Settings"></eds-wc-icon-button>
+ * <eds-wc-icon-button icon="trash" color="critical" size="s" aria-label="Delete"></eds-wc-icon-button>
+ * <eds-wc-icon-button icon="star" color="brand" rounded aria-label="Favorite"></eds-wc-icon-button>
+ * <eds-wc-icon-button icon="bell" disabled aria-label="Notifications"></eds-wc-icon-button>
  * ```
  *
- * @slot - Default slot for overlay content (e.g. badge)
- *
- * @fires click - Native click event (blocked when disabled)
+ * @slot - Default slot for a projected overlay such as an `<eds-wc-badge>`.
  *
- * @csspart button - The internal `<button>` element
- * @csspart svg - The icon SVG element
+ * @fires button-click - Dispatched when the button is clicked. `detail: { originalEvent: Event }`
  */
-let EdsWcIconButton = class EdsWcIconButton extends SizeMixin(ColorMixin(EdsBaseElement)) {
+let EdsWcIconButton = class EdsWcIconButton extends EdsBaseElement {
     constructor() {
         super(...arguments);
-        /** Icon name, optionally with set: `'iconName:setName'`. */
+        /**
+         * The name of the icon to display from the eUI icon library.
+         * @default ''
+         */
         this.icon = '';
-        /** Accessible label for screen readers. */
-        this.ariaLabel = 'Icon button';
-        /** Applies fully rounded border-radius. */
+        /**
+         * Semantic color of the icon button.
+         * @default 'neutral'
+         */
+        this.color = 'neutral';
+        /**
+         * Size of the icon button.
+         * @default 'm'
+         */
+        this.size = 'm';
+        /**
+         * Accessible label for screen readers describing the button's purpose.
+         * @default 'EDS Icon button'
+         */
+        this.ariaLabel = 'EDS Icon button';
+        /**
+         * Applies rounded corners to the button shape instead of default square corners.
+         * @default false
+         */
         this.rounded = false;
-        /** Disabled state. */
+        /**
+         * Disables the button (non-interactive, disabled styling, removed from tab order).
+         * @default false
+         */
         this.disabled = false;
-    }
-    get _iconName() {
-        const raw = this.icon;
-        return raw.indexOf(':') > -1 ? raw.split(':')[0] : raw;
-    }
-    get _resolvedSet() {
-        const raw = this.icon;
-        return raw.indexOf(':') > -1 ? (raw.split(':')[1] || 'regular') : 'regular';
+        this._onClick = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('button-click', {
+                bubbles: true,
+                composed: true,
+                detail: { originalEvent: event },
+            }));
+        };
     }
     static { this.styles = css `
+        :host, *, *::before, *::after {
+            box-sizing: border-box;
+        }
+
+        /* parent overrides :
+           --_button-padding, --_button-surface-hover, --_button-on-surface-hover, --_button-color */
+
         :host {
+            --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle));
+            --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle));
+            --_eds-icon-button-padding: var(--_button-padding, var(--eds-sp-3xs));
+            --_eds-icon-button-color: var(--eds-c-foreground-subtle);
+
             display: inline-flex;
         }
 
         button {
+            /* Reset */
+            font-family: inherit;
+            -webkit-appearance: none;
+            appearance: none;
+
             display: inline-flex;
-            align-items: center;
-            justify-content: center;
             border: none;
             cursor: pointer;
-            background-color: transparent;
-            padding: var(--_padding, var(--eds-sp-3xs));
+            background-color: inherit;
+            padding: var(--_eds-icon-button-padding);
             position: relative;
-            color: var(--_color, var(--eds-c-foreground-subtle));
-            border-radius: 0;
-            line-height: 0;
-            -webkit-appearance: none;
-            appearance: none;
-            font-family: inherit;
+            color: var(--_eds-icon-button-color);
+            border-radius: inherit;
+            outline: none;
         }
 
         button:hover,
         button:active {
-            background-color: var(--_surface-hover, var(--eds-c-surface-neutral-subtle));
-            color: var(--_on-surface-hover, var(--eds-c-on-surface-neutral-subtle));
+            background-color: var(--_eds-icon-button-surface-hover);
+            color: var(--_eds-icon-button-on-surface-hover);
         }
 
-        button:focus-visible {
-            outline: 2px solid var(--eds-c-border-focus);
-            outline-offset: 2px;
+        /* COLOR VARIANTS */
+
+        :host([color="brand"]) {
+            --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-brand--hover));
+            --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-brand--hover));
+            --_eds-icon-button-color: var(--_button-color, var(--eds-c-on-surface-brand));
         }
 
-        button:disabled {
-            cursor: default;
-            color: var(--eds-c-foreground-disabled);
+        :host([color="neutral"]) {
+            --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle--hover));
+            --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle--hover));
+        }
+
+        :host([color="info"]) {
+            --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-info-subtler--hover));
+            --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-info-subtler--hover));
+        }
+
+        :host([color="success"]) {
+            --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-success-subtler--hover));
+            --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-success-subtler--hover));
+        }
+
+        :host([color="warning"]) {
+            --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-warning-subtler--hover));
+            --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-warning-subtler--hover));
         }
-        button:disabled:hover {
-            background-color: transparent;
-            color: var(--eds-c-foreground-disabled);
+
+        :host([color="critical"]) {
+            --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler--hover));
+            --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler--hover));
         }
 
-        /* Rounded */
-        :host([rounded]) button {
+        /* SIZE VARIANTS */
+
+        :host([size="2xs"]) { --_eds-icon-button-padding: var(--_button-padding, var(--eds-sp-2xs)); }
+        :host([size="xs"])  { --_eds-icon-button-padding: var(--_button-padding, var(--eds-sp-2xs)); }
+        :host([size="s"])   { --_eds-icon-button-padding: var(--_button-padding, var(--eds-sp-2xs)); }
+        :host([size="m"])   { --_eds-icon-button-padding: var(--_button-padding, var(--eds-sp-xs)); }
+        :host([size="l"])   { --_eds-icon-button-padding: var(--_button-padding, var(--eds-sp-s)); }
+
+        /* STATE */
+
+        :host([rounded]) {
             border-radius: var(--eds-br-full);
         }
 
-        /* Color variants */
-        :host([color="brand"]) { --_color: var(--eds-c-on-surface-brand); --_surface-hover: var(--eds-c-surface-brand--hover); --_on-surface-hover: var(--eds-c-on-surface-brand--hover); }
-        :host([color="neutral"]) { --_surface-hover: var(--eds-c-surface-neutral-subtle--hover); --_on-surface-hover: var(--eds-c-on-surface-neutral-subtle--hover); }
-        :host([color="info"]) { --_surface-hover: var(--eds-c-surface-info-subtler--hover); --_on-surface-hover: var(--eds-c-on-surface-info-subtler--hover); }
-        :host([color="success"]) { --_surface-hover: var(--eds-c-surface-success-subtler--hover); --_on-surface-hover: var(--eds-c-on-surface-success-subtler--hover); }
-        :host([color="warning"]) { --_surface-hover: var(--eds-c-surface-warning-subtler--hover); --_on-surface-hover: var(--eds-c-on-surface-warning-subtler--hover); }
-        :host([color="critical"]) { --_surface-hover: var(--eds-c-surface-critical-subtler--hover); --_on-surface-hover: var(--eds-c-on-surface-critical-subtler--hover); }
+        :host([disabled]) {
+            --_eds-icon-button-color: var(--_button-color, var(--eds-c-foreground-disabled));
+            --_eds-icon-button-surface-hover: transparent;
+            --_eds-icon-button-on-surface-hover: var(--_eds-icon-button-color);
+        }
+        :host([disabled]) button {
+            cursor: default;
+        }
 
-        /* Size variants */
-        :host([size="2xs"]) { --_padding: var(--eds-sp-2xs); }
-        :host([size="xs"]) { --_padding: var(--eds-sp-2xs); }
-        :host([size="s"]) { --_padding: var(--eds-sp-2xs); }
-        :host([size="m"]) { --_padding: var(--eds-sp-xs); }
-        :host([size="l"]) { --_padding: var(--eds-sp-s); }
+        /* FOCUS RING */
 
-        .icon-svg {
-            width: var(--_icon-size, var(--eds-is-m));
-            height: var(--_icon-size, var(--eds-is-m));
-            fill: currentColor;
-            color: currentColor;
+        button:focus-visible {
+            outline: 2px solid var(--eds-c-border-focus);
+            outline-offset: 2px;
+        }
+        :host([rounded]) button:focus-visible {
+            border-radius: var(--eds-br-full);
+        }
+
+        /* BADGE OVERLAY — a projected eds-wc-badge is absolutely positioned over the
+           top-right of the icon, mirroring the Angular badge's
+           :host-context(.eds-icon-button[size="…"]) offsets. The internal <eds-wc-icon>
+           is position:relative, so the slotted badge anchors to it. */
+        eds-wc-icon {
+            position: relative;
         }
+
+        ::slotted(eds-wc-badge) {
+            position: absolute !important;
+        }
+
+        :host([size="2xs"]) ::slotted(eds-wc-badge) { left: 50%; top: -30%; }
+        :host([size="xs"])  ::slotted(eds-wc-badge) { left: 50%; top: -40%; }
+        :host([size="s"])   ::slotted(eds-wc-badge) { left: 50%; top: -50%; }
+        :host([size="m"])   ::slotted(eds-wc-badge) { left: 50%; top: -40%; }
+        :host([size="l"])   ::slotted(eds-wc-badge) { left: 50%; top: -25%; }
     `; }
     render() {
-        const baseUrl = EdsBaseElement.assetsBaseUrl;
-        const spriteHref = `${baseUrl}/eds/icons/sprites/${this._resolvedSet}.svg#${this._iconName}`;
         return html `
             <button
                 part="button"
                 type="button"
                 ?disabled="${this.disabled}"
-                aria-label="${this.ariaLabel || 'Icon button'}">
-                <svg class="icon-svg" part="svg" aria-hidden="true">
-                    <use href="${spriteHref}"></use>
-                </svg>
-                <slot></slot>
+                tabindex="${this.disabled ? -1 : 0}"
+                aria-label="${this.ariaLabel ?? ''}"
+                @click="${this._onClick}">
+                <eds-wc-icon
+                    .icon="${this.icon}"
+                    .color="${this.color}"
+                    .size="${this.size}">
+                    <slot></slot>
+                </eds-wc-icon>
             </button>
         `;
     }
@@ -138,7 +223,13 @@ __decorate([
     property({ type: String })
 ], EdsWcIconButton.prototype, "icon", void 0);
 __decorate([
-    property({ type: String, attribute: 'aria-label' })
+    property({ type: String, reflect: true })
+], EdsWcIconButton.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcIconButton.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label', reflect: true })
 ], EdsWcIconButton.prototype, "ariaLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

package/eds-icon-button/eds-wc-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"eds-wc-icon-button.js","sourceRoot":"","sources":["../../src/eds-icon-button/eds-wc-icon-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,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;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IAAnE;;QACH,4DAA4D;QAE5D,SAAI,GAAG,EAAE,CAAC;QAEV,2CAA2C;QAElC,cAAS,GAAkB,aAAa,CAAC;QAElD,2CAA2C;QAE3C,YAAO,GAAG,KAAK,CAAC;QAEhB,sBAAsB;QAEtB,aAAQ,GAAG,KAAK,CAAC;IAmGrB,CAAC;IAjGG,IAAY,SAAS;QACjB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC;QACtB,OAAO,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC3D,CAAC;IAED,IAAY,YAAY;QACpB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC;QACtB,OAAO,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAChF,CAAC;aAEe,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoE3B,AApEqB,CAoEpB;IAEiB,MAAM;QACrB,MAAM,OAAO,GAAG,cAAc,CAAC,aAAa,CAAC;QAC7C,MAAM,UAAU,GAAG,GAAG,OAAO,sBAAsB,IAAI,CAAC,YAAY,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;QAE7F,OAAO,IAAI,CAAA;;;;6BAIU,IAAI,CAAC,QAAQ;8BACZ,IAAI,CAAC,SAAS,IAAI,aAAa;;iCAE5B,UAAU;;;;SAIlC,CAAC;IACN,CAAC;;AA9GD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACjB;AAID;IADR,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;kDACF;AAIlD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC3B;AAIhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC1B;AAfR,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAkH3B"}
+{"version":3,"file":"eds-wc-icon-button.js","sourceRoot":"","sources":["../../src/eds-icon-button/eds-wc-icon-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,4BAA4B,CAAC;AAoBpC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,cAAc;IAA5C;;QACH;;;WAGG;QAEH,SAAI,GAAG,EAAE,CAAC;QAEV;;;WAGG;QAEH,UAAK,GAAyB,SAAS,CAAC;QAExC;;;WAGG;QAEH,SAAI,GAAwB,GAAG,CAAC;QAEhC;;;WAGG;QAEM,cAAS,GAAkB,iBAAiB,CAAC;QAEtD;;;WAGG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;;WAGG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAkJT,aAAQ,GAAG,CAAC,KAAY,EAAQ,EAAE;YACtC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAChB,OAAO;YACX,CAAC;YACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC/C,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE;aACnC,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;IACN,CAAC;aA1JmB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2H3B,AA3HqB,CA2HpB;IAEiB,MAAM;QACrB,OAAO,IAAI,CAAA;;;;6BAIU,IAAI,CAAC,QAAQ;4BACd,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;8BACpB,IAAI,CAAC,SAAS,IAAI,EAAE;0BACxB,IAAI,CAAC,QAAQ;;6BAEV,IAAI,CAAC,IAAI;8BACR,IAAI,CAAC,KAAK;6BACX,IAAI,CAAC,IAAI;;;;SAI7B,CAAC;IACN,CAAC;;AAnLD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACjB;AAOV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACF;AAOxC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACV;AAOvB;IADR,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACb;AAOtD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC3B;AAOhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC1B;AAzCR,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAqM3B"}

package/eds-icon-button/index.d.ts

@@ -1,2 +1,3 @@
-export { EdsWcIconButton } from './eds-wc-icon-button.js';
+export { EdsWcIconButton } from './eds-wc-icon-button';
+export type { EdsWcIconButtonColor, EdsWcIconButtonSize } from './eds-wc-icon-button';
 //# sourceMappingURL=index.d.ts.map

package/eds-icon-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-icon-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-icon-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}

package/eds-icon-button/index.js

@@ -1,2 +1,2 @@
-export { EdsWcIconButton } from './eds-wc-icon-button.js';
+export { EdsWcIconButton } from './eds-wc-icon-button';
 //# sourceMappingURL=index.js.map

package/eds-icon-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-icon-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-icon-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

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

@@ -1,30 +1,50 @@
 import { EdsBaseElement } from '../shared/eds-base.js';
-declare const EdsWcTag_base: (new (...args: any[]) => import("../shared/size-mixin.js").SizeMixinInterface) & (new (...args: any[]) => import("../shared/color-mixin.js").ColorMixinInterface) & typeof EdsBaseElement;
+/**
+ * Local narrowed color union — the tag's color contract. Copied verbatim from the
+ * Angular `eds-tag` exported `EdsTagColor` union. No shared-token import.
+ */
+export type EdsWcTagColor = 'primary' | 'neutral' | 'success' | 'info' | 'warning' | 'critical';
+/**
+ * Local narrowed size union — the tag's size contract. Copied verbatim from the
+ * Angular `eds-tag` exported `EdsTagSize` union.
+ */
+export type EdsWcTagSize = 's' | 'm';
 /**
  * `<eds-wc-tag>` — EDS Tag Web Component.
  *
- * A small labeling element for categorization, filtering, or status display.
- * Supports color and size variants, outline mode, and custom color palettes.
+ * A presentational, non-interactive status tag. Displays projected content with a
+ * semantic color and size, exposed to assistive technology via `role="status"`.
+ * 1:1 projection of the Angular `eds-tag`.
  *
  * @example
  * ```html
- * <eds-wc-tag color="success" size="m">Active</eds-wc-tag>
- * <eds-wc-tag color="critical" outline>Rejected</eds-wc-tag>
- * <eds-wc-tag size="l" color-palette="custom-blue">Custom</eds-wc-tag>
+ * <eds-wc-tag color="success">Active</eds-wc-tag>
+ * <eds-wc-tag color="warning" size="s">Pending</eds-wc-tag>
  * ```
  *
- * @slot - Tag content (text, icon + text, etc.)
- *
- * @fires remove - Dispatched when the tag is removed (if removable behavior is added by consumer)
+ * @slot - Tag content (text).
  */
-export declare class EdsWcTag extends EdsWcTag_base {
-    /** Whether to use outline styling (transparent background, stronger border). */
-    outline: boolean;
+export declare class EdsWcTag extends EdsBaseElement {
+    /**
+     * Semantic color of the tag.
+     * @default 'info'
+     */
+    color: EdsWcTagColor;
+    /**
+     * Size of the tag.
+     * @default 'm'
+     */
+    size: EdsWcTagSize;
+    /**
+     * Data attribute for e2e testing.
+     * @default 'eds-tag'
+     */
+    e2eAttr: string;
     /**
-     * Extra color palette class name for custom (non-semantic) colors.
-     * When set, adds `eds-tag--${colorPalette}` to the host.
+     * ARIA label for accessibility.
+     * @default 'status-badge'
      */
-    colorPalette: string;
+    ariaLabel: string | null;
     static styles: import("lit").CSSResult;
     protected render(): import("lit-html").TemplateResult<1>;
     protected updated(): void;
@@ -34,5 +54,4 @@ declare global {
         'eds-wc-tag': EdsWcTag;
     }
 }
-export {};
 //# sourceMappingURL=eds-wc-tag.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"eds-wc-tag.d.ts","sourceRoot":"","sources":["../../src/eds-tag/eds-wc-tag.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;;AAIvD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,QAAS,SAAQ,aAAqC;IAC/D,gFAAgF;IAEhF,OAAO,UAAS;IAEhB;;;OAGG;IAEH,YAAY,SAAM;IAElB,OAAgB,MAAM,0BAwEpB;cAEiB,MAAM;cAIN,OAAO,IAAI,IAAI;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,QAAQ,CAAC;KAC1B;CACJ"}
+{"version":3,"file":"eds-wc-tag.d.ts","sourceRoot":"","sources":["../../src/eds-tag/eds-wc-tag.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;AAEhG;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,CAAC;AAErC;;;;;;;;;;;;;;GAcG;AACH,qBACa,QAAS,SAAQ,cAAc;IACxC;;;OAGG;IAEH,KAAK,EAAE,aAAa,CAAU;IAE9B;;;OAGG;IAEH,IAAI,EAAE,YAAY,CAAO;IAEzB;;;OAGG;IAEH,OAAO,SAAa;IAEpB;;;OAGG;IAEH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAkB;IAE1C,OAAgB,MAAM,0BAuEpB;cAEiB,MAAM;cAIN,OAAO,IAAI,IAAI;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,QAAQ,CAAC;KAC1B;CACJ"}

package/eds-tag/eds-wc-tag.js

@@ -7,107 +7,115 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { EdsBaseElement } from '../shared/eds-base.js';
-import { ColorMixin } from '../shared/color-mixin.js';
-import { SizeMixin } from '../shared/size-mixin.js';
 /**
  * `<eds-wc-tag>` — EDS Tag Web Component.
  *
- * A small labeling element for categorization, filtering, or status display.
- * Supports color and size variants, outline mode, and custom color palettes.
+ * A presentational, non-interactive status tag. Displays projected content with a
+ * semantic color and size, exposed to assistive technology via `role="status"`.
+ * 1:1 projection of the Angular `eds-tag`.
  *
  * @example
  * ```html
- * <eds-wc-tag color="success" size="m">Active</eds-wc-tag>
- * <eds-wc-tag color="critical" outline>Rejected</eds-wc-tag>
- * <eds-wc-tag size="l" color-palette="custom-blue">Custom</eds-wc-tag>
+ * <eds-wc-tag color="success">Active</eds-wc-tag>
+ * <eds-wc-tag color="warning" size="s">Pending</eds-wc-tag>
  * ```
  *
- * @slot - Tag content (text, icon + text, etc.)
- *
- * @fires remove - Dispatched when the tag is removed (if removable behavior is added by consumer)
+ * @slot - Tag content (text).
  */
-let EdsWcTag = class EdsWcTag extends SizeMixin(ColorMixin(EdsBaseElement)) {
+let EdsWcTag = class EdsWcTag extends EdsBaseElement {
     constructor() {
         super(...arguments);
-        /** Whether to use outline styling (transparent background, stronger border). */
-        this.outline = false;
         /**
-         * Extra color palette class name for custom (non-semantic) colors.
-         * When set, adds `eds-tag--${colorPalette}` to the host.
+         * Semantic color of the tag.
+         * @default 'info'
+         */
+        this.color = 'info';
+        /**
+         * Size of the tag.
+         * @default 'm'
+         */
+        this.size = 'm';
+        /**
+         * Data attribute for e2e testing.
+         * @default 'eds-tag'
+         */
+        this.e2eAttr = 'eds-tag';
+        /**
+         * ARIA label for accessibility.
+         * @default 'status-badge'
          */
-        this.colorPalette = '';
+        this.ariaLabel = 'status-badge';
     }
     static { this.styles = css `
+        :host, *, *::before, *::after {
+            box-sizing: border-box;
+        }
+
         :host {
-            --_surface: var(--eds-c-surface-elevation-sunken);
-            --_on-surface: var(--eds-c-foreground-subtle);
-            --_border-color: var(--eds-c-border-neutral-subtle);
+            --_eds-tag-padding: var(--eds-sp-3xs) var(--eds-sp-s);
+            --_eds-tag-border-radius: var(--eds-br-s);
+            --_eds-tag-content-font: var(--eds-f-paragraph-s);
+            --_eds-tag-border-width: var(--eds-bw-xs);
+
+            /* default color = info */
+            --_eds-tag-bg-color: var(--eds-c-surface-info-subtler);
+            --_eds-tag-color-on-bg: var(--eds-c-on-surface-info-subtler);
+            --_eds-tag-border-color: var(--eds-c-border-info-subtle);
 
-            align-items: center;
-            border-radius: var(--eds-br-m);
             display: inline-flex;
-            border: var(--eds-bw-xs) solid var(--_border-color);
-            padding: var(--_tag-padding);
-            font: var(--_font);
-            background-color: var(--_surface);
-            color: var(--_on-surface);
-            gap: var(--eds-sp-3xs);
-            height: var(--_height);
+            gap: var(--eds-sp-xs);
+            border: var(--_eds-tag-border-width) solid var(--_eds-tag-border-color);
+            border-radius: var(--_eds-tag-border-radius);
+            background-color: var(--_eds-tag-bg-color);
+            color: var(--_eds-tag-color-on-bg);
+            padding: var(--_eds-tag-padding);
+            font: var(--_eds-tag-content-font);
         }
 
-        /* Size variants */
-        :host([size="m"]) {
-            --_font: var(--eds-f-paragraph-s);
-            --_tag-padding: var(--eds-sp-4xs) var(--eds-sp-3xs);
-            --_icon-size: var(--eds-is-s);
-            --_height: var(--eds-sp-xl);
-        }
-        :host([size="l"]) {
-            --_font: var(--eds-f-paragraph-s);
-            --_tag-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);
-            --_icon-size: var(--eds-is-m);
-            --_height: var(--eds-sp-2xl);
+        /* COLOR VARIANTS */
+        :host([color="primary"]) {
+            --_eds-tag-bg-color: var(--eds-c-surface-primary-subtler);
+            --_eds-tag-color-on-bg: var(--eds-c-on-surface-primary-subtler);
+            --_eds-tag-border-color: var(--eds-c-border-primary-subtle);
         }
 
-        /* Color variants — filled */
         :host([color="neutral"]) {
-            --_surface: var(--eds-c-surface-elevation-sunken);
-            --_on-surface: var(--eds-c-foreground-subtle);
-            --_border-color: var(--eds-c-border-neutral-subtle);
-        }
-        :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-subtle);
+            --_eds-tag-bg-color: var(--eds-c-surface-neutral-subtler);
+            --_eds-tag-color-on-bg: var(--eds-c-on-surface-neutral-subtler);
+            --_eds-tag-border-color: var(--eds-c-border-neutral-subtle);
         }
+
         :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-subtle);
+            --_eds-tag-bg-color: var(--eds-c-surface-success-subtler);
+            --_eds-tag-color-on-bg: var(--eds-c-on-surface-success-subtler);
+            --_eds-tag-border-color: var(--eds-c-border-success-subtle);
+        }
+
+        :host([color="info"]) {
+            --_eds-tag-bg-color: var(--eds-c-surface-info-subtler);
+            --_eds-tag-color-on-bg: var(--eds-c-on-surface-info-subtler);
+            --_eds-tag-border-color: var(--eds-c-border-info-subtle);
         }
+
         :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-subtle);
+            --_eds-tag-bg-color: var(--eds-c-surface-warning-subtler);
+            --_eds-tag-color-on-bg: var(--eds-c-on-surface-warning-subtler);
+            --_eds-tag-border-color: var(--eds-c-border-warning-subtle);
         }
+
         :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-subtle);
+            --_eds-tag-bg-color: var(--eds-c-surface-critical-subtler);
+            --_eds-tag-color-on-bg: var(--eds-c-on-surface-critical-subtler);
+            --_eds-tag-border-color: var(--eds-c-border-critical-subtle);
         }
 
-        /* Color variants — outline */
-        :host([outline]) {
-            --_surface: transparent;
+        /* SIZE VARIANTS */
+        :host([size="s"]) {
+            --_eds-tag-padding: var(--eds-sp-4xs) var(--eds-sp-xs);
         }
-        :host([outline][color="neutral"]) { --_border-color: var(--eds-c-border-neutral); }
-        :host([outline][color="info"]) { --_border-color: var(--eds-c-border-info); }
-        :host([outline][color="success"]) { --_border-color: var(--eds-c-border-success); }
-        :host([outline][color="warning"]) { --_border-color: var(--eds-c-border-warning); }
-        :host([outline][color="critical"]) { --_border-color: var(--eds-c-border-critical); }
 
-        ::slotted(eds-wc-icon) {
-            --_icon-size: inherit;
+        :host([size="m"]) {
+            --_eds-tag-padding: var(--eds-sp-3xs) var(--eds-sp-xs);
         }
     `; }
     render() {
@@ -118,11 +126,17 @@ let EdsWcTag = class EdsWcTag extends SizeMixin(ColorMixin(EdsBaseElement)) {
     }
 };
 __decorate([
-    property({ type: Boolean, reflect: true })
-], EdsWcTag.prototype, "outline", void 0);
+    property({ type: String, reflect: true })
+], EdsWcTag.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcTag.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'data-e2e' })
+], EdsWcTag.prototype, "e2eAttr", void 0);
 __decorate([
-    property({ type: String, attribute: 'color-palette' })
-], EdsWcTag.prototype, "colorPalette", void 0);
+    property({ type: String, reflect: true, attribute: 'aria-label' })
+], EdsWcTag.prototype, "ariaLabel", void 0);
 EdsWcTag = __decorate([
     customElement('eds-wc-tag')
 ], EdsWcTag);