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

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

@@ -0,0 +1,107 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { EdsBaseElement } from '../shared/eds-base.js';
+/**
+ * `<eds-wc-icon-image>` — EDS Icon Image Web Component.
+ *
+ * Displays a raster/vector image as an icon from a direct URL, bypassing sprite-set
+ * resolution. Sized via the `size` string attribute. 1:1 projection of the Angular
+ * `eds-icon-image`.
+ *
+ * @example
+ * ```html
+ * <eds-wc-icon-image icon-url="/assets/custom-icon.svg" size="l" aria-label="Custom icon"></eds-wc-icon-image>
+ * ```
+ */
+let EdsWcIconImage = class EdsWcIconImage extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Direct URL to an SVG/image icon file, bypassing icon-set resolution. Useful for
+         * loading custom or external icons not in configured icon sets.
+         * @default ''
+         */
+        this.iconUrl = '';
+        /**
+         * Size of the icon.
+         * @default 'm'
+         */
+        this.size = 'm';
+        /**
+         * Accessible label for screen readers describing the icon's purpose.
+         * When set, the icon gets `role="img"` and this label; when empty it is hidden from
+         * assistive technologies.
+         * @default ''
+         */
+        this.ariaLabel = '';
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after {
+            box-sizing: border-box;
+        }
+
+        :host {
+            /* inherited from parent */
+            --_eds-icon-image-size: var(--_icon-size, var(--eds-is-m));
+
+            display: inline-flex;
+            position: relative;
+        }
+
+        .eds-icon-svg-image {
+            height: var(--_eds-icon-image-size);
+            width: var(--_eds-icon-image-size);
+        }
+
+        /* SIZE VARIANTS */
+        :host([size="2xs"]) { --_eds-icon-image-size: var(--eds-is-2xs); }
+        :host([size="xs"])  { --_eds-icon-image-size: var(--eds-is-xs); }
+        :host([size="s"])   { --_eds-icon-image-size: var(--eds-is-s); }
+        :host([size="m"])   { --_eds-icon-image-size: var(--eds-is-m); }
+        :host([size="l"])   { --_eds-icon-image-size: var(--eds-is-l); }
+        :host([size="xl"])  { --_eds-icon-image-size: var(--eds-is-xl); }
+        :host([size="2xl"]) { --_eds-icon-image-size: var(--eds-is-2xl); }
+        :host([size="3xl"]) { --_eds-icon-image-size: var(--eds-is-3xl); }
+        :host([size="4xl"]) { --_eds-icon-image-size: var(--eds-is-4xl); }
+    `; }
+    render() {
+        return html `
+            <svg class="eds-icon-svg-image" aria-hidden="true" role="img">
+                <image href="${this.iconUrl}" class="eds-icon-svg-image"></image>
+            </svg>
+        `;
+    }
+    updated() {
+        // Mirror the Angular host bindings: a label promotes the host to role="img";
+        // otherwise the icon is decorative and hidden from assistive technologies.
+        const hasLabel = !!this.ariaLabel && this.ariaLabel.length > 0;
+        if (hasLabel) {
+            this.setAttribute('role', 'img');
+            this.removeAttribute('aria-hidden');
+        }
+        else {
+            this.removeAttribute('role');
+            this.setAttribute('aria-hidden', 'true');
+        }
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'icon-url' })
+], EdsWcIconImage.prototype, "iconUrl", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcIconImage.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label', reflect: true })
+], EdsWcIconImage.prototype, "ariaLabel", void 0);
+EdsWcIconImage = __decorate([
+    customElement('eds-wc-icon-image')
+], EdsWcIconImage);
+export { EdsWcIconImage };
+//# sourceMappingURL=eds-wc-icon-image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-wc-icon-image.js","sourceRoot":"","sources":["../../src/eds-icon/eds-wc-icon-image.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;AAGvD;;;;;;;;;;;GAWG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,cAAc;IAA3C;;QACH;;;;WAIG;QAEH,YAAO,GAAG,EAAE,CAAC;QAEb;;;WAGG;QAEH,SAAI,GAAkB,GAAG,CAAC;QAE1B;;;;;WAKG;QAEM,cAAS,GAAkB,EAAE,CAAC;IAoD3C,CAAC;aAlDmB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4B3B,AA5BqB,CA4BpB;IAEiB,MAAM;QACrB,OAAO,IAAI,CAAA;;+BAEY,IAAI,CAAC,OAAO;;SAElC,CAAC;IACN,CAAC;IAEkB,OAAO;QACtB,6EAA6E;QAC7E,2EAA2E;QAC3E,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;QAC/D,IAAI,QAAQ,EAAE,CAAC;YACX,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;YAC7B,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QAC7C,CAAC;IACL,CAAC;;AAnED;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;+CACrC;AAOb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAChB;AASjB;IADR,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC5B;AAvB9B,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CA2E1B"}

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

@@ -1,59 +1,76 @@
 import { EdsBaseElement } from '../shared/eds-base.js';
-declare const EdsWcIcon_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 icon's color contract. Copied verbatim from the
+ * Angular `eds-icon` exported `EdsIconColor` union. No shared-token import.
+ */
+export type EdsWcIconColor = 'neutral' | 'neutral-subtle' | 'neutral-subtler' | 'primary' | 'highlight' | 'info' | 'success' | 'warning' | 'critical' | 'brand' | 'disabled';
+/**
+ * Local narrowed size union — the icon's size contract. Copied verbatim from the
+ * Angular `eds-icon` exported `EdsIconSize` union.
+ */
+export type EdsWcIconSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl';
 /**
  * `<eds-wc-icon>` — EDS Icon Web Component.
  *
- * Displays an SVG icon from an EDS icon sprite sheet.
- * Supports size/color variants, loading spinner, and rounded clip.
+ * Displays a scalable vector icon from a sprite set. Supports semantic color and size via
+ * string attributes, an optional circular clip, and a loading spinner. Icons resolve from
+ * the configured assets path using the `iconName:setName` convention. 1:1 projection of the
+ * Angular `eds-icon`.
  *
  * @example
  * ```html
- * <eds-wc-icon icon="star" size="m" color="primary"></eds-wc-icon>
- * <eds-wc-icon icon="flag-be:flags-4x3" size="l" rounded></eds-wc-icon>
- * <eds-wc-icon icon="spinner" loading></eds-wc-icon>
+ * <eds-wc-icon icon="check" color="success" size="m"></eds-wc-icon>
+ * <eds-wc-icon icon="warning" color="warning" size="l" aria-label="Warning"></eds-wc-icon>
+ * <eds-wc-icon icon="check:core"></eds-wc-icon>
+ * <eds-wc-icon icon="flag-be:flags-4x3" rounded></eds-wc-icon>
+ * <eds-wc-icon loading></eds-wc-icon>
  * ```
  *
- * @slot - Default slot for projected content (e.g. badge overlay)
- *
- * @csspart svg - The SVG element rendering the icon
- * @csspart spinner - The loading spinner element
+ * @slot - Default slot for projected content (e.g. a badge overlay).
  */
-export declare class EdsWcIcon extends EdsWcIcon_base {
+export declare class EdsWcIcon extends EdsBaseElement {
     /**
-     * Icon name, optionally with set: `'iconName'` or `'iconName:setName'`.
-     * When using the colon format, the part after `:` determines which sprite sheet to load.
+     * Name of the icon to display, optionally including the icon set using `iconName:setName`
+     * format. When the value contains a colon, it splits into icon name and set.
+     * @default ''
      */
     icon: string;
     /**
-     * Icon set / sprite sheet to load from.
-     * Only used when `icon` doesn't contain a colon separator.
+     * Icon set library to load the icon from. Used only when `icon` has no colon separator.
      * @default 'regular'
      */
     set: string;
     /**
-     * Accessible label for screen readers.
-     * When set, the icon gets `role="img"` and this label.
-     * When empty, the icon is hidden from assistive technologies.
+     * Semantic color of the icon.
+     * @default 'neutral'
      */
-    ariaLabel: string | null;
+    color: EdsWcIconColor;
+    /**
+     * Size of the icon.
+     * @default 'm'
+     */
+    size: EdsWcIconSize;
     /**
-     * Whether to hide the icon from assistive technologies.
-     * @default true
+     * Accessible label for screen readers describing the icon's purpose.
+     * When set, the icon gets `role="img"` and this label; when empty it is hidden from
+     * assistive technologies.
+     * @default ''
      */
-    ariaHidden: string | null;
+    ariaLabel: string | null;
     /**
-     * Clips the icon to a circle (border-radius: 50%).
-     * Useful for flag icons or avatars.
+     * Applies a circular clip (border-radius: 50%) to the icon, useful for flag icons.
+     * @default false
      */
     rounded: boolean;
     /**
-     * Replaces the icon with a spinning loading indicator.
+     * When true, replaces the icon with a spinning loading indicator.
      * The spinner inherits the icon's size and color.
+     * @default false
      */
     loading: boolean;
-    /** Resolved icon name (part before colon, or full string). */
+    /** Resolved icon name (part before the colon, or the full string). */
     private get iconName();
-    /** Resolved icon set (part after colon, or `set` property). */
+    /** Resolved icon set (part after the colon, or the `set` property; defaults to `regular`). */
     private get resolvedSet();
     static styles: import("lit").CSSResult;
     protected render(): import("lit-html").TemplateResult<1>;
@@ -64,5 +81,4 @@ declare global {
         'eds-wc-icon': EdsWcIcon;
     }
 }
-export {};
 //# sourceMappingURL=eds-wc-icon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"eds-wc-icon.d.ts","sourceRoot":"","sources":["../../src/eds-icon/eds-wc-icon.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;;AAIvD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,SAAU,SAAQ,cAAqC;IAChE;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;;OAIG;IAEH,GAAG,SAAa;IAEhB;;;;OAIG;IAEM,SAAS,EAAE,MAAM,GAAG,IAAI,CAAM;IAEvC;;;OAGG;IAEM,UAAU,EAAE,MAAM,GAAG,IAAI,CAAU;IAE5C;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,OAAO,UAAS;IAEhB,8DAA8D;IAC9D,OAAO,KAAK,QAAQ,GAMnB;IAED,+DAA+D;IAC/D,OAAO,KAAK,WAAW,GAMtB;IAED,OAAgB,MAAM,0BAqEpB;cAEiB,MAAM;cAsBN,OAAO,IAAI,IAAI;CAWrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,aAAa,EAAE,SAAS,CAAC;KAC5B;CACJ"}
+{"version":3,"file":"eds-wc-icon.d.ts","sourceRoot":"","sources":["../../src/eds-icon/eds-wc-icon.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;GAGG;AACH,MAAM,MAAM,cAAc,GACpB,SAAS,GACT,gBAAgB,GAChB,iBAAiB,GACjB,SAAS,GACT,WAAW,GACX,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,GACV,OAAO,GACP,UAAU,CAAC;AAEjB;;;GAGG;AACH,MAAM,MAAM,aAAa,GACnB,KAAK,GACL,IAAI,GACJ,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEZ;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,SAAU,SAAQ,cAAc;IACzC;;;;OAIG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,GAAG,SAAa;IAEhB;;;OAGG;IAEH,KAAK,EAAE,cAAc,CAAa;IAElC;;;OAGG;IAEH,IAAI,EAAE,aAAa,CAAO;IAE1B;;;;;OAKG;IAEM,SAAS,EAAE,MAAM,GAAG,IAAI,CAAM;IAEvC;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;;OAIG;IAEH,OAAO,UAAS;IAEhB,sEAAsE;IACtE,OAAO,KAAK,QAAQ,GAMnB;IAED,8FAA8F;IAC9F,OAAO,KAAK,WAAW,GAMtB;IAED,OAAgB,MAAM,0BA0EpB;cAEiB,MAAM;cAkBN,OAAO,IAAI,IAAI;CAYrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,aAAa,EAAE,SAAS,CAAC;KAC5B;CACJ"}

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

@@ -7,63 +7,69 @@ 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-icon>` — EDS Icon Web Component.
  *
- * Displays an SVG icon from an EDS icon sprite sheet.
- * Supports size/color variants, loading spinner, and rounded clip.
+ * Displays a scalable vector icon from a sprite set. Supports semantic color and size via
+ * string attributes, an optional circular clip, and a loading spinner. Icons resolve from
+ * the configured assets path using the `iconName:setName` convention. 1:1 projection of the
+ * Angular `eds-icon`.
  *
  * @example
  * ```html
- * <eds-wc-icon icon="star" size="m" color="primary"></eds-wc-icon>
- * <eds-wc-icon icon="flag-be:flags-4x3" size="l" rounded></eds-wc-icon>
- * <eds-wc-icon icon="spinner" loading></eds-wc-icon>
+ * <eds-wc-icon icon="check" color="success" size="m"></eds-wc-icon>
+ * <eds-wc-icon icon="warning" color="warning" size="l" aria-label="Warning"></eds-wc-icon>
+ * <eds-wc-icon icon="check:core"></eds-wc-icon>
+ * <eds-wc-icon icon="flag-be:flags-4x3" rounded></eds-wc-icon>
+ * <eds-wc-icon loading></eds-wc-icon>
  * ```
  *
- * @slot - Default slot for projected content (e.g. badge overlay)
- *
- * @csspart svg - The SVG element rendering the icon
- * @csspart spinner - The loading spinner element
+ * @slot - Default slot for projected content (e.g. a badge overlay).
  */
-let EdsWcIcon = class EdsWcIcon extends SizeMixin(ColorMixin(EdsBaseElement)) {
+let EdsWcIcon = class EdsWcIcon extends EdsBaseElement {
     constructor() {
         super(...arguments);
         /**
-         * Icon name, optionally with set: `'iconName'` or `'iconName:setName'`.
-         * When using the colon format, the part after `:` determines which sprite sheet to load.
+         * Name of the icon to display, optionally including the icon set using `iconName:setName`
+         * format. When the value contains a colon, it splits into icon name and set.
+         * @default ''
          */
         this.icon = '';
         /**
-         * Icon set / sprite sheet to load from.
-         * Only used when `icon` doesn't contain a colon separator.
+         * Icon set library to load the icon from. Used only when `icon` has no colon separator.
          * @default 'regular'
          */
         this.set = 'regular';
         /**
-         * Accessible label for screen readers.
-         * When set, the icon gets `role="img"` and this label.
-         * When empty, the icon is hidden from assistive technologies.
+         * Semantic color of the icon.
+         * @default 'neutral'
          */
-        this.ariaLabel = '';
+        this.color = 'neutral';
         /**
-         * Whether to hide the icon from assistive technologies.
-         * @default true
+         * Size of the icon.
+         * @default 'm'
          */
-        this.ariaHidden = 'true';
+        this.size = 'm';
         /**
-         * Clips the icon to a circle (border-radius: 50%).
-         * Useful for flag icons or avatars.
+         * Accessible label for screen readers describing the icon's purpose.
+         * When set, the icon gets `role="img"` and this label; when empty it is hidden from
+         * assistive technologies.
+         * @default ''
+         */
+        this.ariaLabel = '';
+        /**
+         * Applies a circular clip (border-radius: 50%) to the icon, useful for flag icons.
+         * @default false
          */
         this.rounded = false;
         /**
-         * Replaces the icon with a spinning loading indicator.
+         * When true, replaces the icon with a spinning loading indicator.
          * The spinner inherits the icon's size and color.
+         * @default false
          */
         this.loading = false;
     }
-    /** Resolved icon name (part before colon, or full string). */
+    /** Resolved icon name (part before the colon, or the full string). */
     get iconName() {
         const raw = this.icon;
         if (raw && raw.indexOf(':') > -1) {
@@ -71,7 +77,7 @@ let EdsWcIcon = class EdsWcIcon extends SizeMixin(ColorMixin(EdsBaseElement)) {
         }
         return raw;
     }
-    /** Resolved icon set (part after colon, or `set` property). */
+    /** Resolved icon set (part after the colon, or the `set` property; defaults to `regular`). */
     get resolvedSet() {
         const raw = this.icon;
         if (raw && raw.indexOf(':') > -1) {
@@ -80,67 +86,72 @@ let EdsWcIcon = class EdsWcIcon extends SizeMixin(ColorMixin(EdsBaseElement)) {
         return this.set || 'regular';
     }
     static { this.styles = css `
+        :host, *, *::before, *::after {
+            box-sizing: border-box;
+        }
+
         :host {
+            /* inherited from parent; each color variant supplies its own token below */
+            --_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;
-
-            --_size: var(--_icon-size, var(--eds-is-m));
-            --_color: var(--_on-surface, var(--eds-c-foreground));
         }
 
-        /* Size variants */
-        :host([size="2xs"]) { --_size: var(--eds-is-2xs); }
-        :host([size="xs"]) { --_size: var(--eds-is-xs); }
-        :host([size="s"]) { --_size: var(--eds-is-s); }
-        :host([size="m"]) { --_size: var(--eds-is-m); }
-        :host([size="l"]) { --_size: var(--eds-is-l); }
-        :host([size="xl"]) { --_size: var(--eds-is-xl); }
-        :host([size="2xl"]) { --_size: var(--eds-is-2xl); }
-        :host([size="3xl"]) { --_size: var(--eds-is-3xl); }
-        :host([size="4xl"]) { --_size: var(--eds-is-4xl); }
+        /* SIZE VARIANTS */
+        :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); }
 
-        /* Color variants */
-        :host([color="neutral"]) { --_color: var(--eds-c-foreground); }
-        :host([color="neutral-subtle"]) { --_color: var(--eds-c-foreground-subtle); }
-        :host([color="neutral-subtler"]) { --_color: var(--eds-c-foreground-subtler); }
-        :host([color="primary"]) { --_color: var(--eds-c-foreground-primary); }
-        :host([color="highlight"]) { --_color: var(--eds-c-foreground-highlight); }
-        :host([color="info"]) { --_color: var(--eds-c-foreground-info); }
-        :host([color="success"]) { --_color: var(--eds-c-foreground-success); }
-        :host([color="warning"]) { --_color: var(--eds-c-foreground-warning); }
-        :host([color="critical"]) { --_color: var(--eds-c-foreground-critical); }
-        :host([color="brand"]) { --_color: var(--eds-c-on-surface-brand); }
-        :host([color="disabled"]) { --_color: var(--eds-c-foreground-disabled); }
-
-        /* Rounded variant */
-        :host([rounded]) {
-            border-radius: 50%;
-            overflow: hidden;
-        }
-        :host([rounded]) .eds-icon-svg {
-            border-radius: 50%;
-        }
+        /* COLOR VARIANTS */
+        :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)); }
 
         .eds-icon-svg {
-            height: var(--_size);
-            width: var(--_size);
-            fill: var(--_color);
-            color: var(--_color);
+            height: var(--_eds-icon-size);
+            width: var(--_eds-icon-size);
+            fill: var(--_eds-icon-color);
+            color: var(--_eds-icon-color);
         }
 
-        /* Multi-color sprites (flags) — disable fill inheritance */
+        /* Multi-color sprites (flags) — disable fill inheritance so path fill attributes render */
         .eds-icon-svg.eds-icon-set-flags-1x1,
         .eds-icon-svg.eds-icon-set-flags-4x3 {
             fill: none;
         }
 
-        /* Loading spinner */
-        .eds-icon-spinner {
+        /* ROUNDED */
+        :host([rounded]) {
+            border-radius: 50%;
+            overflow: hidden;
+        }
+        :host([rounded]) .eds-icon-svg {
+            border-radius: 50%;
+        }
+
+        /* LOADING SPINNER — inherits icon size and color */
+        :host([loading]) .eds-icon-spinner {
             display: inline-block;
-            width: var(--_size);
-            height: var(--_size);
+            width: var(--_eds-icon-size);
+            height: var(--_eds-icon-size);
             border: 3px solid var(--eds-c-border-neutral-subtle);
-            border-top-color: var(--_color);
+            border-top-color: var(--_eds-icon-color);
             border-radius: 50%;
             animation: eds-icon-spin 0.6s linear infinite;
         }
@@ -156,21 +167,19 @@ let EdsWcIcon = class EdsWcIcon extends SizeMixin(ColorMixin(EdsBaseElement)) {
         const spriteHref = `${baseUrl}/eds/icons/sprites/${setName}.svg#${iconName}`;
         return html `
             ${this.loading
-            ? html `<span class="eds-icon-spinner" part="spinner" aria-hidden="true"></span>`
-            : html `
-                    <svg
-                        class="eds-icon-svg eds-icon-set-${setName}"
-                        part="svg"
+            ? html `<span class="eds-icon-spinner" aria-hidden="true"></span>`
+            : html `<svg
+                        class="eds-icon-svg eds-sprite-${iconName} eds-icon-set-${setName}"
                         aria-hidden="true">
                         <use href="${spriteHref}"></use>
-                    </svg>
-                `}
+                    </svg>`}
             <slot></slot>
         `;
     }
     updated() {
-        // Sync ARIA attributes based on label
-        const hasLabel = this.ariaLabel && this.ariaLabel.length > 0;
+        // Mirror the Angular host bindings: an accessible label promotes the icon to
+        // role="img"; otherwise it is decorative and hidden from assistive technologies.
+        const hasLabel = !!this.ariaLabel && this.ariaLabel.length > 0;
         if (hasLabel) {
             this.setAttribute('role', 'img');
             this.removeAttribute('aria-hidden');
@@ -188,11 +197,14 @@ __decorate([
     property({ type: String })
 ], EdsWcIcon.prototype, "set", void 0);
 __decorate([
-    property({ type: String, attribute: 'aria-label' })
-], EdsWcIcon.prototype, "ariaLabel", void 0);
+    property({ type: String, reflect: true })
+], EdsWcIcon.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcIcon.prototype, "size", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'aria-hidden', reflect: true })
-], EdsWcIcon.prototype, "ariaHidden", void 0);
+    property({ type: String, attribute: 'aria-label', reflect: true })
+], EdsWcIcon.prototype, "ariaLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EdsWcIcon.prototype, "rounded", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"eds-wc-icon.js","sourceRoot":"","sources":["../../src/eds-icon/eds-wc-icon.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"eds-wc-icon.js","sourceRoot":"","sources":["../../src/eds-icon/eds-wc-icon.ts"],"names":[],"mappings":"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"}

package/eds-icon/index.d.ts

@@ -1,2 +1,4 @@
-export { EdsWcIcon } from './eds-wc-icon.js';
+export { EdsWcIcon } from './eds-wc-icon';
+export type { EdsWcIconColor, EdsWcIconSize } from './eds-wc-icon';
+export { EdsWcIconImage } from './eds-wc-icon-image';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

package/eds-icon/index.js

@@ -1,2 +1,3 @@
-export { EdsWcIcon } from './eds-wc-icon.js';
+export { EdsWcIcon } from './eds-wc-icon';
+export { EdsWcIconImage } from './eds-wc-icon-image';
 //# sourceMappingURL=index.js.map

package/eds-icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -1,42 +1,77 @@
 import { EdsBaseElement } from '../shared/eds-base.js';
-declare const EdsWcIconButton_base: (new (...args: any[]) => import("../shared/size-mixin.js").SizeMixinInterface) & (new (...args: any[]) => import("../shared/color-mixin.js").ColorMixinInterface) & typeof EdsBaseElement;
+import '../eds-icon/eds-wc-icon.js';
+/**
+ * Local narrowed color union — the icon button's color contract. Copied verbatim from the
+ * Angular `eds-icon-button` exported `EdsIconButtonColor` union. No shared-token import.
+ */
+export type EdsWcIconButtonColor = 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical';
+/**
+ * Local narrowed size union — the icon button's size contract. Copied verbatim from the
+ * Angular `eds-icon-button` exported `EdsIconButtonSize` union.
+ */
+export type EdsWcIconButtonSize = '2xs' | 'xs' | 's' | 'm' | 'l';
 /**
  * `<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 }`
  */
-export declare class EdsWcIconButton extends EdsWcIconButton_base {
-    /** Icon name, optionally with set: `'iconName:setName'`. */
+export declare class EdsWcIconButton extends EdsBaseElement {
+    /**
+     * The name of the icon to display from the eUI icon library.
+     * @default ''
+     */
     icon: string;
-    /** Accessible label for screen readers. */
+    /**
+     * Semantic color of the icon button.
+     * @default 'neutral'
+     */
+    color: EdsWcIconButtonColor;
+    /**
+     * Size of the icon button.
+     * @default 'm'
+     */
+    size: EdsWcIconButtonSize;
+    /**
+     * Accessible label for screen readers describing the button's purpose.
+     * @default 'EDS Icon button'
+     */
     ariaLabel: string | null;
-    /** Applies fully rounded border-radius. */
+    /**
+     * Applies rounded corners to the button shape instead of default square corners.
+     * @default false
+     */
     rounded: boolean;
-    /** Disabled state. */
+    /**
+     * Disables the button (non-interactive, disabled styling, removed from tab order).
+     * @default false
+     */
     disabled: boolean;
-    private get _iconName();
-    private get _resolvedSet();
     static styles: import("lit").CSSResult;
     protected render(): import("lit-html").TemplateResult<1>;
+    private _onClick;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'eds-wc-icon-button': EdsWcIconButton;
     }
 }
-export {};
 //# sourceMappingURL=eds-wc-icon-button.d.ts.map