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

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-subtler));
+            --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtler));
+        }
+
+        :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-icon-state/eds-wc-icon-state.d.ts

@@ -0,0 +1,56 @@
+import { EdsBaseElement } from '../shared/eds-base.js';
+/**
+ * Local narrowed color union — the icon-state's color contract. Copied verbatim from the
+ * Angular `eds-icon-state` exported `EdsIconStateColor` union. Each value maps to a specific
+ * status icon. No shared-token import.
+ */
+export type EdsWcIconStateColor = 'info' | 'success' | 'warning' | 'critical';
+/**
+ * Local narrowed size union — the icon-state's size contract. Copied verbatim from the
+ * Angular `eds-icon-state` exported `EdsIconStateSize` union.
+ */
+export type EdsWcIconStateSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+/**
+ * `<eds-wc-icon-state>` — EDS Icon State Web Component.
+ *
+ * Renders exactly one status `<eds-wc-icon>` chosen by the semantic `color`:
+ * `success` → `check-circle:core`, `warning` → `warning:core`,
+ * `critical` → `warning-circle:core`, `info` → `info:core`. The inner icon receives the same
+ * `color` and `size`, and a default accessible label per status ("EDS success/warning/danger/info
+ * icon"), overridable via the `aria-label` attribute. 1:1 projection of the Angular
+ * `eds-icon-state`.
+ *
+ * @example
+ * ```html
+ * <eds-wc-icon-state></eds-wc-icon-state>
+ * <eds-wc-icon-state color="success" size="l"></eds-wc-icon-state>
+ * <eds-wc-icon-state color="critical" aria-label="Error"></eds-wc-icon-state>
+ * ```
+ */
+export declare class EdsWcIconState extends EdsBaseElement {
+    /**
+     * Semantic status color, selecting the corresponding status icon.
+     * @default 'info'
+     */
+    color: EdsWcIconStateColor;
+    /**
+     * Size of the status icon.
+     * @default 'm'
+     */
+    size: EdsWcIconStateSize;
+    /**
+     * Accessible label for screen readers describing the icon's purpose or meaning.
+     * When empty, a sensible default is derived from the status `color`
+     * ("EDS success/warning/danger/info icon").
+     * @default ''
+     */
+    ariaLabel: string | null;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'eds-wc-icon-state': EdsWcIconState;
+    }
+}
+//# sourceMappingURL=eds-wc-icon-state.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-wc-icon-state.d.ts","sourceRoot":"","sources":["../../src/eds-icon-state/eds-wc-icon-state.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAMvD;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAE9E;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAUvE;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,cAAe,SAAQ,cAAc;IAC9C;;;OAGG;IAEH,KAAK,EAAE,mBAAmB,CAAU;IAEpC;;;OAGG;IAEH,IAAI,EAAE,kBAAkB,CAAO;IAE/B;;;;;OAKG;IAEM,SAAS,EAAE,MAAM,GAAG,IAAI,CAAM;IAEvC,OAAgB,MAAM,0BAQpB;cAEiB,MAAM;CAa5B;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,mBAAmB,EAAE,cAAc,CAAC;KACvC;CACJ"}

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

@@ -0,0 +1,93 @@
+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';
+import { EdsWcIcon } from '../eds-icon/eds-wc-icon';
+// Ensure the inner <eds-wc-icon> custom element is registered.
+void EdsWcIcon;
+/** Maps a semantic status color to its icon name and default accessible label. */
+const ICON_STATE_MAP = {
+    success: { icon: 'check-circle:core', ariaLabel: 'EDS success icon' },
+    warning: { icon: 'warning:core', ariaLabel: 'EDS warning icon' },
+    critical: { icon: 'warning-circle:core', ariaLabel: 'EDS danger icon' },
+    info: { icon: 'info:core', ariaLabel: 'EDS info icon' },
+};
+/**
+ * `<eds-wc-icon-state>` — EDS Icon State Web Component.
+ *
+ * Renders exactly one status `<eds-wc-icon>` chosen by the semantic `color`:
+ * `success` → `check-circle:core`, `warning` → `warning:core`,
+ * `critical` → `warning-circle:core`, `info` → `info:core`. The inner icon receives the same
+ * `color` and `size`, and a default accessible label per status ("EDS success/warning/danger/info
+ * icon"), overridable via the `aria-label` attribute. 1:1 projection of the Angular
+ * `eds-icon-state`.
+ *
+ * @example
+ * ```html
+ * <eds-wc-icon-state></eds-wc-icon-state>
+ * <eds-wc-icon-state color="success" size="l"></eds-wc-icon-state>
+ * <eds-wc-icon-state color="critical" aria-label="Error"></eds-wc-icon-state>
+ * ```
+ */
+let EdsWcIconState = class EdsWcIconState extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Semantic status color, selecting the corresponding status icon.
+         * @default 'info'
+         */
+        this.color = 'info';
+        /**
+         * Size of the status icon.
+         * @default 'm'
+         */
+        this.size = 'm';
+        /**
+         * Accessible label for screen readers describing the icon's purpose or meaning.
+         * When empty, a sensible default is derived from the status `color`
+         * ("EDS success/warning/danger/info icon").
+         * @default ''
+         */
+        this.ariaLabel = '';
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after {
+            box-sizing: border-box;
+        }
+
+        :host {
+            display: flex;
+        }
+    `; }
+    render() {
+        const state = ICON_STATE_MAP[this.color] ?? ICON_STATE_MAP.info;
+        const label = this.ariaLabel && this.ariaLabel.length > 0 ? this.ariaLabel : state.ariaLabel;
+        return html `
+            <eds-wc-icon
+                icon="${state.icon}"
+                color="${this.color}"
+                size="${this.size}"
+                aria-label="${label}"
+            ></eds-wc-icon>
+        `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcIconState.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcIconState.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label' })
+], EdsWcIconState.prototype, "ariaLabel", void 0);
+EdsWcIconState = __decorate([
+    customElement('eds-wc-icon-state')
+], EdsWcIconState);
+export { EdsWcIconState };
+//# sourceMappingURL=eds-wc-icon-state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eds-wc-icon-state.js","sourceRoot":"","sources":["../../src/eds-icon-state/eds-wc-icon-state.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,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,+DAA+D;AAC/D,KAAK,SAAS,CAAC;AAef,kFAAkF;AAClF,MAAM,cAAc,GAAqE;IACrF,OAAO,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,SAAS,EAAE,kBAAkB,EAAE;IACrE,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,kBAAkB,EAAE;IAChE,QAAQ,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,SAAS,EAAE,iBAAiB,EAAE;IACvE,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAE;CAC1D,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,cAAc;IAA3C;;QACH;;;WAGG;QAEH,UAAK,GAAwB,MAAM,CAAC;QAEpC;;;WAGG;QAEH,SAAI,GAAuB,GAAG,CAAC;QAE/B;;;;;WAKG;QAEM,cAAS,GAAkB,EAAE,CAAC;IAyB3C,CAAC;aAvBmB,WAAM,GAAG,GAAG,CAAA;;;;;;;;KAQ3B,AARqB,CAQpB;IAEiB,MAAM;QACrB,MAAM,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC;QAChE,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC;QAE7F,OAAO,IAAI,CAAA;;wBAEK,KAAK,CAAC,IAAI;yBACT,IAAI,CAAC,KAAK;wBACX,IAAI,CAAC,IAAI;8BACH,KAAK;;SAE1B,CAAC;IACN,CAAC;;AAxCD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACN;AAOpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACX;AAStB;IADR,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;iDACb;AAtB9B,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CA+C1B"}

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

@@ -0,0 +1,3 @@
+export { EdsWcIconState } from './eds-wc-icon-state';
+export type { EdsWcIconStateColor, EdsWcIconStateSize } from './eds-wc-icon-state';
+//# sourceMappingURL=index.d.ts.map

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

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

package/eds-icon-state/index.js

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

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

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

package/eds-input-addon/eds-wc-input-addon.d.ts

@@ -0,0 +1,55 @@
+import { EdsBaseElement } from '../shared/eds-base.js';
+/** Local narrowed union — the addon's position contract (copied from the Angular source). */
+export type EdsWcInputAddonPosition = 'start' | 'end';
+/**
+ * `<eds-wc-input-addon>` — EDS Input Addon Web Component.
+ *
+ * A layout component that positions a **non-actionable** static addon (fixed text and/or an icon)
+ * flush against an input field — e.g. a currency symbol, a `https://` prefix, a unit suffix.
+ *
+ * Visually it mirrors `<eds-wc-input-button>`'s footprint but reads as a **recessed extension of the
+ * field**, not a control: sunken surface, muted (subtler) foreground, `cursor: default`, no hover /
+ * focus states, and it is not in the tab order. Use `eds-wc-input-button` when the trailing/leading
+ * element must be clickable; use `eds-wc-input-addon` when it is purely contextual text/icon.
+ *
+ * @example
+ * ```html
+ * <!-- Addon at start of input (default) -->
+ * <eds-wc-input-addon>
+ *   <eds-wc-input-text placeholder="example.com"></eds-wc-input-text>
+ *   <span slot="label">https://</span>
+ * </eds-wc-input-addon>
+ *
+ * <!-- Addon at end of input -->
+ * <eds-wc-input-addon position="end">
+ *   <eds-wc-input-text placeholder="0.00"></eds-wc-input-text>
+ *   <span slot="label">EUR</span>
+ * </eds-wc-input-addon>
+ *
+ * <!-- With an icon -->
+ * <eds-wc-input-addon>
+ *   <eds-wc-input-text placeholder="Search..."></eds-wc-input-text>
+ *   <eds-wc-icon slot="label" icon="magnifying-glass" aria-hidden="true"></eds-wc-icon>
+ * </eds-wc-input-addon>
+ * ```
+ *
+ * @slot - The projected input element (default slot).
+ * @slot label - The static addon content (text and/or icon), wrapped in the addon label.
+ */
+export declare class EdsWcInputAddon extends EdsBaseElement {
+    /**
+     * Which side of the input the addon sits on, reflected as the `position` attribute.
+     * `start` = left in LTR (right in RTL); `end` = the opposite side.
+     */
+    position: EdsWcInputAddonPosition;
+    /** Data attribute value for end-to-end testing identification, reflected as `data-e2e`. */
+    e2eAttr: string;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'eds-wc-input-addon': EdsWcInputAddon;
+    }
+}
+//# sourceMappingURL=eds-wc-input-addon.d.ts.map

package/eds-input-addon/eds-wc-input-addon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-wc-input-addon.d.ts","sourceRoot":"","sources":["../../src/eds-input-addon/eds-wc-input-addon.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,6FAA6F;AAC7F,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,eAAgB,SAAQ,cAAc;IAC/C;;;OAGG;IACwC,QAAQ,EAAE,uBAAuB,CAAW;IAEvF,2FAA2F;IACzB,OAAO,SAAqB;IAE9F,OAAgB,MAAM,0BAqGpB;cAEiB,MAAM;CAQ5B;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,oBAAoB,EAAE,eAAe,CAAC;KAAE;CAAE"}