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

package/eds-input-addon/eds-wc-input-addon.js

@@ -0,0 +1,177 @@
+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-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.
+ */
+let EdsWcInputAddon = class EdsWcInputAddon extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 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.
+         */
+        this.position = 'start';
+        /** Data attribute value for end-to-end testing identification, reflected as `data-e2e`. */
+        this.e2eAttr = 'eds-input-addon';
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after { box-sizing: border-box; }
+
+        :host {
+            display: flex;
+            width: 100%;
+            border-radius: var(--eds-br-s);
+        }
+
+        /* The static addon label — a recessed, non-actionable extension of the field:
+           sunken surface + subtler foreground + no interaction affordance. */
+        .eds-input-addon__label {
+            display: inline-flex;
+            align-items: center;
+            gap: var(--eds-sp-2xs);
+            padding: 0 var(--eds-sp-s);
+            white-space: nowrap;
+            background-color: var(--eds-c-surface-elevation-inset);
+            color: var(--eds-c-foreground-subtler);
+            font: var(--eds-f-paragraph-m);
+            border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
+            cursor: default;
+            user-select: none;
+            position: relative;
+        }
+
+        /* Projected icons inherit the muted foreground so text + icon read alike. */
+        .eds-input-addon__label ::slotted(eds-wc-icon) {
+            color: var(--eds-c-foreground-subtler);
+        }
+
+        /* The projected input grows to fill the row so the group spans the full width; the addon
+           label stays at its intrinsic (content) width. */
+        ::slotted(:not([slot="label"])) {
+            flex: 1;
+            min-width: 0;
+        }
+
+        /* Position variants — reflected as the \`position\` host attribute (String-Props model).
+           Template DOM order is input first, then label. \`start\` reverses the row so the label sits
+           before (left of) the input; \`end\` keeps the natural order so the label sits after. */
+
+        /* Start: label appears on the left, joined to the input's left edge. */
+        :host([position="start"]) {
+            flex-direction: row-reverse;
+        }
+
+        :host([position="start"]) .eds-input-addon__label {
+            border-right: none;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-top-left-radius: var(--eds-br-s);
+            border-bottom-left-radius: var(--eds-br-s);
+        }
+
+        /* Vertical divider sitting just inside the addon's inner (right) edge, so it reads as
+           part of the addon rather than straddling the seam with the input. */
+        :host([position="start"]) .eds-input-addon__label::after {
+            background-color: var(--eds-c-border-divider);
+            content: "";
+            display: block;
+            height: 1.75rem;
+            right: 0;
+            position: absolute;
+            top: var(--eds-sp-2xs);
+            width: 1px;
+        }
+
+        :host([position="start"]) ::slotted(:not([slot="label"])) {
+            border-left: none;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        /* End: label appears on the right, joined to the input's right edge (natural DOM order). */
+        :host([position="end"]) .eds-input-addon__label {
+            border-left: none;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-top-right-radius: var(--eds-br-s);
+            border-bottom-right-radius: var(--eds-br-s);
+        }
+
+        /* Vertical divider sitting just inside the addon's inner (left) edge, so it reads as
+           part of the addon rather than straddling the seam with the input. */
+        :host([position="end"]) .eds-input-addon__label::before {
+            background-color: var(--eds-c-border-divider);
+            content: "";
+            display: block;
+            height: 1.75rem;
+            left: 0;
+            position: absolute;
+            top: var(--eds-sp-2xs);
+            width: 1px;
+        }
+
+        :host([position="end"]) ::slotted(:not([slot="label"])) {
+            border-right: none;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    `; }
+    render() {
+        return html `
+            <slot></slot>
+            <span class="eds-input-addon__label">
+                <slot name="label"></slot>
+            </span>
+        `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcInputAddon.prototype, "position", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'data-e2e' })
+], EdsWcInputAddon.prototype, "e2eAttr", void 0);
+EdsWcInputAddon = __decorate([
+    customElement('eds-wc-input-addon')
+], EdsWcInputAddon);
+export { EdsWcInputAddon };
+//# sourceMappingURL=eds-wc-input-addon.js.map

package/eds-input-addon/eds-wc-input-addon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-wc-input-addon.js","sourceRoot":"","sources":["../../src/eds-input-addon/eds-wc-input-addon.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;AAKvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,cAAc;IAA5C;;QACH;;;WAGG;QACwC,aAAQ,GAA4B,OAAO,CAAC;QAEvF,2FAA2F;QACzB,YAAO,GAAG,iBAAiB,CAAC;IAiHlG,CAAC;aA/GmB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqG3B,AArGqB,CAqGpB;IAEiB,MAAM;QACrB,OAAO,IAAI,CAAA;;;;;SAKV,CAAC;IACN,CAAC;;AAnH0C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAA6C;AAGrB;IAAjE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;gDAA6B;AARrF,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAyH3B"}

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

@@ -0,0 +1,3 @@
+export { EdsWcInputAddon } from './eds-wc-input-addon';
+export type { EdsWcInputAddonPosition } from './eds-wc-input-addon';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-input-addon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC"}

package/eds-input-addon/index.js

@@ -0,0 +1,2 @@
+export { EdsWcInputAddon } from './eds-wc-input-addon';
+//# sourceMappingURL=index.js.map

package/eds-input-addon/index.js.map

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

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

@@ -1,30 +1,108 @@
 import { EdsBaseElement } from '../shared/eds-base.js';
+/** Resolved button position (mirrors the Angular `position` computed value). */
+export type EdsWcInputButtonPosition = 'start' | 'end';
 /**
  * `<eds-wc-input-button>` — EDS Input Button Web Component.
  *
- * Combines a text input with a button, sharing a common border.
+ * A layout component that positions a button relative to an input field, sharing a common border,
+ * and manages focus across the group with a **roving tabindex** so the group is a single tab stop.
+ * 1:1 projection of the Angular `eds-input-button` component (which is no longer a pure layout
+ * wrapper — it owns the roving-tabindex focus model).
+ *
+ * ### Focus model (roving tabindex)
+ * - The group is a SINGLE tab stop: on render every projected focusable control gets
+ *   `tabindex="-1"` EXCEPT the primary control (the first input/textarea/select) which gets
+ *   `tabindex="0"`, so `Tab` lands directly on the input.
+ * - Arrow keys rove focus between the group's controls in DOM order — the input, the clearable
+ *   "✕" icon (`.eds-clearable-icon`, present only while the field has a value), and the button.
+ *   `ArrowRight`/`ArrowDown` → next (wrap to first); `ArrowLeft`/`ArrowUp` → previous (wrap to
+ *   last); `Home` → first; `End` → last. All of these `preventDefault`.
+ * - The managed-children set is recomputed live and EXCLUDES disabled and not-currently-visible
+ *   controls (the clearable icon is `visibility:hidden` when empty → skipped then).
+ * - `focusin` on a child adopts it as the active roving target and moves the single `tabindex="0"`
+ *   onto it, so a subsequent `Tab` LEAVES the group from wherever focus is (no trap). `Tab` is not
+ *   intercepted.
+ *
+ * ### Slot model (differs from Angular)
+ * In Angular the host queries its own light-DOM descendants
+ * (`host.querySelectorAll('input,button,select,textarea,.eds-clearable-icon')`). In the WC the
+ * children arrive via `<slot>`, so the managed set is read from the slots' assigned elements
+ * (`slot.assignedElements({flatten:true})`, descending into each for focusables + the clearable
+ * icon) rather than `this.querySelectorAll`.
  *
  * @example
  * ```html
  * <eds-wc-input-button>
- *   <eds-wc-input-text slot="input" placeholder="Search..."></eds-wc-input-text>
+ *   <eds-wc-input-text placeholder="Search..."></eds-wc-input-text>
  *   <eds-wc-button slot="button" type="secondary" color="neutral" size="m">Go</eds-wc-button>
  * </eds-wc-input-button>
  *
  * <eds-wc-input-button position="start">
- *   <eds-wc-input-text slot="input" placeholder="Search..."></eds-wc-input-text>
- *   <eds-wc-button slot="button" type="secondary" color="neutral" size="m">Go</eds-wc-button>
+ *   <eds-wc-input-text placeholder="Filter..."></eds-wc-input-text>
+ *   <eds-wc-icon-button slot="button" icon="filter" aria-label="Filter"></eds-wc-icon-button>
  * </eds-wc-input-button>
  * ```
  *
- * @slot input - The input element
- * @slot button - The button element
+ * @slot - Default slot for the input (and its injected clearable "✕" icon).
+ * @slot button - The trailing/leading button (text `eds-wc-button` or `eds-wc-icon-button`).
  */
 export declare class EdsWcInputButton extends EdsBaseElement {
-    /** Button position: 'end' (default) or 'start'. */
-    position: 'start' | 'end';
+    /**
+     * Data attribute value for end-to-end testing identification.
+     * @default 'eds-input-button'
+     */
+    e2eAttr: string;
+    /**
+     * Resolved button position, reflected as the `position` host attribute. `start` reverses the
+     * layout direction and moves the shared border/divider to the opposite edge; `end` (default)
+     * places the button after the input.
+     * @default 'end'
+     */
+    position: EdsWcInputButtonPosition;
+    /** Index (within the managed-children list) of the roving active control. */
+    private _activeIndex;
+    connectedCallback(): void;
     static styles: import("lit").CSSResult;
     protected render(): import("lit-html").TemplateResult<1>;
+    /**
+     * The group's controls that participate in arrow-key roving, in DOM order (default slot first,
+     * then the button slot): the projected input/button plus the clearable "✕" icon
+     * (`.eds-clearable-icon`). Disabled and not-currently-rendered controls (e.g. the hidden
+     * clearable icon when the field is empty) are excluded so the cycle only visits reachable
+     * targets.
+     *
+     * Reads the slots' assigned elements (NOT `this.querySelectorAll`) and descends into each — the
+     * focusable may be a native control inside a composed WC (e.g. the `<input>` inside
+     * `eds-wc-input-text`'s shadow root) or a slotted light-DOM node.
+     */
+    private _managedChildren;
+    /**
+     * Index of the primary control that owns the natural tab stop — the input field (first
+     * `input`/`textarea`/`select`) — so `Tab` lands directly on it. Falls back to the first child
+     * when there is no input-like control.
+     */
+    private _primaryIndex;
+    /**
+     * Roving tabindex reset: the primary (input) control stays in the natural tab order so `Tab`
+     * focuses it directly; every other control is reachable only via the arrow keys.
+     */
+    private _resetRovingTabStop;
+    private _onSlotChange;
+    /**
+     * Track focus entering a projected control so the arrow keys continue from the control the user
+     * is actually on (e.g. after a click), and keep the roving tab stop in sync so a subsequent
+     * `Tab` leaves from here.
+     */
+    private _onFocusIn;
+    private _onKeydown;
+    private _nextIndex;
+    private _focusChild;
+    /**
+     * Move the single roving tab stop (`tabindex="0"`) onto the active control and set every other
+     * control to `tabindex="-1"`, so after arrow navigation `Tab` leaves the group from wherever
+     * focus currently is.
+     */
+    private _setActive;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"eds-wc-input-button.d.ts","sourceRoot":"","sources":["../../src/eds-input-button/eds-wc-input-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,gBAAiB,SAAQ,cAAc;IAChD,mDAAmD;IACR,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAS;IAE7E,OAAgB,MAAM,0BAMpB;cAEiB,MAAM;CAM5B;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,qBAAqB,EAAE,gBAAgB,CAAC;KAAE;CAAE"}
+{"version":3,"file":"eds-wc-input-button.d.ts","sourceRoot":"","sources":["../../src/eds-input-button/eds-wc-input-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,gFAAgF;AAChF,MAAM,MAAM,wBAAwB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,qBACa,gBAAiB,SAAQ,cAAc;IAChD;;;OAGG;IAEH,OAAO,SAAsB;IAE7B;;;;;OAKG;IAEH,QAAQ,EAAE,wBAAwB,CAAS;IAE3C,6EAA6E;IAC7E,OAAO,CAAC,YAAY,CAAK;IAEhB,iBAAiB,IAAI,IAAI;IAKlC,OAAgB,MAAM,0BA2FpB;cAEiB,MAAM;IAczB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,gBAAgB;IAgCxB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAOrB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,aAAa;IAIrB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,UAAU;IA8BlB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IASnB;;;;OAIG;IACH,OAAO,CAAC,UAAU;CAMrB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,qBAAqB,EAAE,gBAAgB,CAAC;KAC3C;CACJ"}

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

@@ -10,44 +10,306 @@ import { EdsBaseElement } from '../shared/eds-base.js';
 /**
  * `<eds-wc-input-button>` — EDS Input Button Web Component.
  *
- * Combines a text input with a button, sharing a common border.
+ * A layout component that positions a button relative to an input field, sharing a common border,
+ * and manages focus across the group with a **roving tabindex** so the group is a single tab stop.
+ * 1:1 projection of the Angular `eds-input-button` component (which is no longer a pure layout
+ * wrapper — it owns the roving-tabindex focus model).
+ *
+ * ### Focus model (roving tabindex)
+ * - The group is a SINGLE tab stop: on render every projected focusable control gets
+ *   `tabindex="-1"` EXCEPT the primary control (the first input/textarea/select) which gets
+ *   `tabindex="0"`, so `Tab` lands directly on the input.
+ * - Arrow keys rove focus between the group's controls in DOM order — the input, the clearable
+ *   "✕" icon (`.eds-clearable-icon`, present only while the field has a value), and the button.
+ *   `ArrowRight`/`ArrowDown` → next (wrap to first); `ArrowLeft`/`ArrowUp` → previous (wrap to
+ *   last); `Home` → first; `End` → last. All of these `preventDefault`.
+ * - The managed-children set is recomputed live and EXCLUDES disabled and not-currently-visible
+ *   controls (the clearable icon is `visibility:hidden` when empty → skipped then).
+ * - `focusin` on a child adopts it as the active roving target and moves the single `tabindex="0"`
+ *   onto it, so a subsequent `Tab` LEAVES the group from wherever focus is (no trap). `Tab` is not
+ *   intercepted.
+ *
+ * ### Slot model (differs from Angular)
+ * In Angular the host queries its own light-DOM descendants
+ * (`host.querySelectorAll('input,button,select,textarea,.eds-clearable-icon')`). In the WC the
+ * children arrive via `<slot>`, so the managed set is read from the slots' assigned elements
+ * (`slot.assignedElements({flatten:true})`, descending into each for focusables + the clearable
+ * icon) rather than `this.querySelectorAll`.
  *
  * @example
  * ```html
  * <eds-wc-input-button>
- *   <eds-wc-input-text slot="input" placeholder="Search..."></eds-wc-input-text>
+ *   <eds-wc-input-text placeholder="Search..."></eds-wc-input-text>
  *   <eds-wc-button slot="button" type="secondary" color="neutral" size="m">Go</eds-wc-button>
  * </eds-wc-input-button>
  *
  * <eds-wc-input-button position="start">
- *   <eds-wc-input-text slot="input" placeholder="Search..."></eds-wc-input-text>
- *   <eds-wc-button slot="button" type="secondary" color="neutral" size="m">Go</eds-wc-button>
+ *   <eds-wc-input-text placeholder="Filter..."></eds-wc-input-text>
+ *   <eds-wc-icon-button slot="button" icon="filter" aria-label="Filter"></eds-wc-icon-button>
  * </eds-wc-input-button>
  * ```
  *
- * @slot input - The input element
- * @slot button - The button element
+ * @slot - Default slot for the input (and its injected clearable "✕" icon).
+ * @slot button - The trailing/leading button (text `eds-wc-button` or `eds-wc-icon-button`).
  */
 let EdsWcInputButton = class EdsWcInputButton extends EdsBaseElement {
     constructor() {
         super(...arguments);
-        /** Button position: 'end' (default) or 'start'. */
+        /**
+         * Data attribute value for end-to-end testing identification.
+         * @default 'eds-input-button'
+         */
+        this.e2eAttr = 'eds-input-button';
+        /**
+         * Resolved button position, reflected as the `position` host attribute. `start` reverses the
+         * layout direction and moves the shared border/divider to the opposite edge; `end` (default)
+         * places the button after the input.
+         * @default 'end'
+         */
         this.position = 'end';
+        /** Index (within the managed-children list) of the roving active control. */
+        this._activeIndex = 0;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'group');
     }
     static { this.styles = css `
-        :host { display: flex; width: 100%; border-radius: var(--eds-br-s); }
-        :host([position="start"]) { flex-direction: row-reverse; }
+        :host, *, *::before, *::after {
+            box-sizing: border-box;
+        }
+
+        :host {
+            display: flex;
+            width: 100%;
+            border-radius: var(--eds-br-s);
+            outline: none;
+            position: relative;
+        }
+
+        /* The input fills all space left of the button; the button keeps its intrinsic width.
+           \`order\` makes the layout independent of DOM order: input first (grows), then the
+           collapsed clear-icon wrapper at the input's trailing edge, then the button. In Shadow
+           DOM these target the top-level slotted nodes via ::slotted(...). */
+        ::slotted(eds-wc-input-text),
+        ::slotted(input),
+        ::slotted(.eds-input-text) {
+            flex: 1 1 auto;
+            min-width: 0;
+            order: 1;
+        }
+
+        ::slotted([slot="button"]) {
+            flex: 0 0 auto;
+            order: 3;
+        }
+
+        /*
+         * Clearable-wrapper handling (Angular SCSS used \`order\` + \`:has()\` to grow the
+         * input/the wrapper-containing-input, collapse an empty icon-only wrapper to zero width at
+         * the input's trailing edge, and keep the button intrinsic). LIMITATION: Shadow-DOM
+         * \`::slotted()\` only matches the TOP-LEVEL slotted node and cannot use \`:has()\` to
+         * inspect a slotted node's own descendants, so the full Angular wrapper logic cannot be
+         * reproduced selector-for-selector. In this WC the clearable "✕" is rendered INSIDE
+         * \`eds-wc-input-text\`'s own shadow root (absolutely positioned at the input's right
+         * edge), so there is no injected top-level wrapper element at the group level to collapse —
+         * the single \`::slotted(eds-wc-input-text)\` grow rule above is sufficient to make the
+         * group fill its width with the clear icon anchored inside the input.
+         */
+
+        /* Whole-group focus ring whenever focus is on one of the projected controls. */
+        :host(:focus-within) {
+            outline: var(--eds-bw-s) solid var(--eds-c-border-focus);
+            outline-offset: var(--eds-bw-s);
+        }
+
+        /* Critical / invalid state → the whole-group focus ring turns critical. The invalid signal
+           is the projected input's \`invalid\` attribute (standalone usage) or a reflected
+           \`invalid\` host attribute set by a composing parent such as eds-input-password. */
+        :host([invalid]:focus-within),
+        :host(:focus-within:has(::slotted([invalid]))) {
+            outline-color: var(--eds-c-focus-critical);
+        }
+
+        /* The projected button reads as a raised field affordance joined to the input. */
+        ::slotted([slot="button"]) {
+            position: relative;
+        }
+
+        /*
+         * Suppressing the input's own focus ring (so only the one group ring shows) and drawing the
+         * button's INSET critical-aware ring are handled inside the slotted components' OWN shadow
+         * roots in this WC: \`eds-wc-input-text\` renders a borderless field (its visual border is
+         * the group's), and \`eds-wc-button\`/\`eds-wc-icon-button\` draw their own
+         * \`:focus-visible\` outline. LIMITATION: Shadow-DOM \`::slotted()\` reaches only the
+         * top-level slotted node, so the Angular \`!important\` overrides that reached INTO the
+         * projected input/button (\`.eds-input-text:focus-visible\`, \`.eds-button:focus\`) cannot
+         * be reproduced from here. The intent (single group ring; inset ring on the focused button;
+         * critical color when invalid) is preserved by the sibling components' own styles plus the
+         * group \`:focus-within\` ring above.
+         */
 
-        ::slotted([slot="input"]) { flex: 1; min-width: 0; }
-        ::slotted([slot="button"]) { flex-shrink: 0; }
+        /* Position variants — reflected as the \`position\` host attribute. */
+        :host([position="start"]) {
+            flex-direction: row-reverse;
+        }
+
+        :host([position="start"]) ::slotted([slot="button"]) {
+            border-right: none;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        :host([position="end"]) ::slotted([slot="button"]) {
+            border-left: none;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
     `; }
     render() {
         return html `
-            <slot name="input"></slot>
-            <slot name="button"></slot>
+            <slot
+                @slotchange="${this._onSlotChange}"
+                @focusin="${this._onFocusIn}"
+                @keydown="${this._onKeydown}"></slot>
+            <slot
+                name="button"
+                @slotchange="${this._onSlotChange}"
+                @focusin="${this._onFocusIn}"
+                @keydown="${this._onKeydown}"></slot>
         `;
     }
+    /**
+     * The group's controls that participate in arrow-key roving, in DOM order (default slot first,
+     * then the button slot): the projected input/button plus the clearable "✕" icon
+     * (`.eds-clearable-icon`). Disabled and not-currently-rendered controls (e.g. the hidden
+     * clearable icon when the field is empty) are excluded so the cycle only visits reachable
+     * targets.
+     *
+     * Reads the slots' assigned elements (NOT `this.querySelectorAll`) and descends into each — the
+     * focusable may be a native control inside a composed WC (e.g. the `<input>` inside
+     * `eds-wc-input-text`'s shadow root) or a slotted light-DOM node.
+     */
+    _managedChildren() {
+        const selector = 'input, button, select, textarea, .eds-clearable-icon';
+        const slots = this.shadowRoot?.querySelectorAll('slot') ?? [];
+        const found = [];
+        for (const slot of Array.from(slots)) {
+            for (const assigned of slot.assignedElements({ flatten: true })) {
+                const el = assigned;
+                // The assigned node may itself be a focusable, OR expose focusables in its shadow
+                // root (composed WCs like eds-wc-input-text / eds-wc-icon-button), OR contain them
+                // in light DOM.
+                if (el.matches(selector)) {
+                    found.push(el);
+                }
+                const root = el.shadowRoot ?? el;
+                root.querySelectorAll(selector).forEach((c) => found.push(c));
+            }
+        }
+        return found.filter((el) => {
+            if (el.hasAttribute('disabled')) {
+                return false;
+            }
+            // Skip controls that are not actually visible/rendered — notably the clearable icon,
+            // which is hidden (visibility:hidden) when empty.
+            if (getComputedStyle(el).visibility === 'hidden') {
+                return false;
+            }
+            return el.offsetParent !== null || getComputedStyle(el).position === 'fixed';
+        });
+    }
+    /**
+     * Index of the primary control that owns the natural tab stop — the input field (first
+     * `input`/`textarea`/`select`) — so `Tab` lands directly on it. Falls back to the first child
+     * when there is no input-like control.
+     */
+    _primaryIndex(children) {
+        const inputIndex = children.findIndex((el) => /^(input|textarea|select)$/i.test(el.tagName));
+        return inputIndex >= 0 ? inputIndex : 0;
+    }
+    /**
+     * Roving tabindex reset: the primary (input) control stays in the natural tab order so `Tab`
+     * focuses it directly; every other control is reachable only via the arrow keys.
+     */
+    _resetRovingTabStop() {
+        const children = this._managedChildren();
+        if (children.length === 0) {
+            return;
+        }
+        const primary = this._primaryIndex(children);
+        this._activeIndex = primary;
+        children.forEach((el, index) => el.setAttribute('tabindex', index === primary ? '0' : '-1'));
+    }
+    _onSlotChange() {
+        this._resetRovingTabStop();
+    }
+    /**
+     * Track focus entering a projected control so the arrow keys continue from the control the user
+     * is actually on (e.g. after a click), and keep the roving tab stop in sync so a subsequent
+     * `Tab` leaves from here.
+     */
+    _onFocusIn(event) {
+        const children = this._managedChildren();
+        const path = event.composedPath();
+        const index = children.findIndex((el) => path.includes(el));
+        if (index >= 0) {
+            this._setActive(index, children);
+        }
+    }
+    _onKeydown(event) {
+        const children = this._managedChildren();
+        if (children.length === 0) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                this._focusChild(this._nextIndex(1, children), children);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                this._focusChild(this._nextIndex(-1, children), children);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._focusChild(0, children);
+                break;
+            case 'End':
+                event.preventDefault();
+                this._focusChild(children.length - 1, children);
+                break;
+            default:
+                break;
+        }
+    }
+    _nextIndex(delta, children) {
+        const count = children.length;
+        return (this._activeIndex + delta + count) % count;
+    }
+    _focusChild(index, children) {
+        const target = children[index];
+        if (!target) {
+            return;
+        }
+        this._setActive(index, children);
+        target.focus();
+    }
+    /**
+     * Move the single roving tab stop (`tabindex="0"`) onto the active control and set every other
+     * control to `tabindex="-1"`, so after arrow navigation `Tab` leaves the group from wherever
+     * focus currently is.
+     */
+    _setActive(index, children) {
+        this._activeIndex = index;
+        children.forEach((el, i) => el.setAttribute('tabindex', i === index ? '0' : '-1'));
+    }
 };
+__decorate([
+    property({ type: String, attribute: 'data-e2e', reflect: true })
+], EdsWcInputButton.prototype, "e2eAttr", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], EdsWcInputButton.prototype, "position", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"eds-wc-input-button.js","sourceRoot":"","sources":["../../src/eds-input-button/eds-wc-input-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;AAEvD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;IAA7C;;QACH,mDAAmD;QACR,aAAQ,GAAoB,KAAK,CAAC;IAgBjF,CAAC;aAdmB,WAAM,GAAG,GAAG,CAAA;;;;;;KAM3B,AANqB,CAMpB;IAEiB,MAAM;QACrB,OAAO,IAAI,CAAA;;;SAGV,CAAC;IACN,CAAC;;AAf0C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAmC;AAFpE,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAkB5B"}
+{"version":3,"file":"eds-wc-input-button.js","sourceRoot":"","sources":["../../src/eds-input-button/eds-wc-input-button.ts"],"names":[],"mappings":"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"}

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

@@ -1,2 +1,3 @@
-export { EdsWcInputButton } from './eds-wc-input-button.js';
+export { EdsWcInputButton } from './eds-wc-input-button';
+export type { EdsWcInputButtonPosition } from './eds-wc-input-button';
 //# sourceMappingURL=index.d.ts.map