@eui/eds-wc 22.0.0-alpha.44 → 22.0.0-alpha.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/eds-avatar/eds-wc-avatar.d.ts.map +1 -1
  2. package/eds-avatar/eds-wc-avatar.js +19 -18
  3. package/eds-avatar/eds-wc-avatar.js.map +1 -1
  4. package/eds-badge/eds-wc-badge.d.ts +4 -4
  5. package/eds-badge/eds-wc-badge.d.ts.map +1 -1
  6. package/eds-badge/eds-wc-badge.js +54 -29
  7. package/eds-badge/eds-wc-badge.js.map +1 -1
  8. package/eds-button/eds-wc-button.d.ts.map +1 -1
  9. package/eds-button/eds-wc-button.js +7 -1
  10. package/eds-button/eds-wc-button.js.map +1 -1
  11. package/{eds-input-checkbox/eds-wc-input-checkbox.d.ts → eds-checkbox/eds-wc-checkbox.d.ts} +8 -8
  12. package/eds-checkbox/eds-wc-checkbox.d.ts.map +1 -0
  13. package/{eds-input-checkbox/eds-wc-input-checkbox.js → eds-checkbox/eds-wc-checkbox.js} +16 -16
  14. package/eds-checkbox/eds-wc-checkbox.js.map +1 -0
  15. package/eds-checkbox/index.d.ts +2 -0
  16. package/eds-checkbox/index.d.ts.map +1 -0
  17. package/eds-checkbox/index.js +2 -0
  18. package/eds-checkbox/index.js.map +1 -0
  19. package/eds-chip/eds-wc-chip.d.ts.map +1 -1
  20. package/eds-chip/eds-wc-chip.js +12 -4
  21. package/eds-chip/eds-wc-chip.js.map +1 -1
  22. package/eds-fab-button/eds-wc-fab-button.js +2 -2
  23. package/eds-icon/eds-wc-icon.d.ts.map +1 -1
  24. package/eds-icon/eds-wc-icon.js +58 -26
  25. package/eds-icon/eds-wc-icon.js.map +1 -1
  26. package/eds-icon-button/eds-wc-icon-button.js +2 -2
  27. package/eds-input-button/eds-wc-input-button.d.ts +86 -8
  28. package/eds-input-button/eds-wc-input-button.d.ts.map +1 -1
  29. package/eds-input-button/eds-wc-input-button.js +275 -13
  30. package/eds-input-button/eds-wc-input-button.js.map +1 -1
  31. package/eds-input-button/index.d.ts +2 -1
  32. package/eds-input-button/index.d.ts.map +1 -1
  33. package/eds-input-button/index.js +1 -1
  34. package/eds-input-button/index.js.map +1 -1
  35. package/{eds-input-prompt/eds-wc-input-prompt.d.ts → eds-input-chat/eds-wc-input-chat.d.ts} +12 -12
  36. package/eds-input-chat/eds-wc-input-chat.d.ts.map +1 -0
  37. package/{eds-input-prompt/eds-wc-input-prompt.js → eds-input-chat/eds-wc-input-chat.js} +59 -59
  38. package/eds-input-chat/eds-wc-input-chat.js.map +1 -0
  39. package/eds-input-chat/index.d.ts +3 -0
  40. package/eds-input-chat/index.d.ts.map +1 -0
  41. package/eds-input-chat/index.js +2 -0
  42. package/eds-input-chat/index.js.map +1 -0
  43. package/eds-input-password/eds-wc-input-password.d.ts +21 -20
  44. package/eds-input-password/eds-wc-input-password.d.ts.map +1 -1
  45. package/eds-input-password/eds-wc-input-password.js +48 -27
  46. package/eds-input-password/eds-wc-input-password.js.map +1 -1
  47. package/{eds-input-radio/eds-wc-input-radio.d.ts → eds-radio/eds-wc-radio.d.ts} +6 -6
  48. package/eds-radio/eds-wc-radio.d.ts.map +1 -0
  49. package/{eds-input-radio/eds-wc-input-radio.js → eds-radio/eds-wc-radio.js} +16 -16
  50. package/eds-radio/eds-wc-radio.js.map +1 -0
  51. package/eds-radio/index.d.ts +2 -0
  52. package/eds-radio/index.d.ts.map +1 -0
  53. package/eds-radio/index.js +2 -0
  54. package/eds-radio/index.js.map +1 -0
  55. package/index.d.ts +4 -4
  56. package/index.d.ts.map +1 -1
  57. package/index.js +3 -3
  58. package/index.js.map +1 -1
  59. package/package.json +10 -10
  60. package/eds-input-checkbox/eds-wc-input-checkbox.d.ts.map +0 -1
  61. package/eds-input-checkbox/eds-wc-input-checkbox.js.map +0 -1
  62. package/eds-input-checkbox/index.d.ts +0 -2
  63. package/eds-input-checkbox/index.d.ts.map +0 -1
  64. package/eds-input-checkbox/index.js +0 -2
  65. package/eds-input-checkbox/index.js.map +0 -1
  66. package/eds-input-prompt/eds-wc-input-prompt.d.ts.map +0 -1
  67. package/eds-input-prompt/eds-wc-input-prompt.js.map +0 -1
  68. package/eds-input-prompt/index.d.ts +0 -3
  69. package/eds-input-prompt/index.d.ts.map +0 -1
  70. package/eds-input-prompt/index.js +0 -2
  71. package/eds-input-prompt/index.js.map +0 -1
  72. package/eds-input-radio/eds-wc-input-radio.d.ts.map +0 -1
  73. package/eds-input-radio/eds-wc-input-radio.js.map +0 -1
  74. package/eds-input-radio/index.d.ts +0 -2
  75. package/eds-input-radio/index.d.ts.map +0 -1
  76. package/eds-input-radio/index.js +0 -2
  77. package/eds-input-radio/index.js.map +0 -1
@@ -91,37 +91,69 @@ let EdsWcIcon = class EdsWcIcon extends EdsBaseElement {
91
91
  }
92
92
 
93
93
  :host {
94
- /* inherited from parent; each color variant supplies its own token below */
95
- --_eds-icon-size: var(--_icon-size, var(--eds-is-m));
96
- --_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground)));
94
+ /* inherited channels from a composing parent (badge/button/chip/avatar);
95
+ a standalone icon falls back to its own size/color token below. */
96
+ --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-m));
97
+ --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground));
97
98
 
98
99
  display: inline-flex;
99
100
  position: relative;
100
101
  }
101
102
 
102
- /* SIZE VARIANTS */
103
- :host([size="2xs"]) { --_eds-icon-size: var(--eds-is-2xs); }
104
- :host([size="xs"]) { --_eds-icon-size: var(--eds-is-xs); }
105
- :host([size="s"]) { --_eds-icon-size: var(--eds-is-s); }
106
- :host([size="m"]) { --_eds-icon-size: var(--eds-is-m); }
107
- :host([size="l"]) { --_eds-icon-size: var(--eds-is-l); }
108
- :host([size="xl"]) { --_eds-icon-size: var(--eds-is-xl); }
109
- :host([size="2xl"]) { --_eds-icon-size: var(--eds-is-2xl); }
110
- :host([size="3xl"]) { --_eds-icon-size: var(--eds-is-3xl); }
111
- :host([size="4xl"]) { --_eds-icon-size: var(--eds-is-4xl); }
103
+ /* SIZE VARIANTS — each also feeds the badge-size inherit channel for a projected badge */
104
+ :host([size="3xs"]) {
105
+ --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-3xs));
106
+ --_eds-badge-empty-size-inherit: var(--eds-sp-2xs);
107
+ }
108
+ :host([size="2xs"]) {
109
+ --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-2xs));
110
+ --_eds-badge-empty-size-inherit: var(--eds-sp-2xs);
111
+ }
112
+ :host([size="xs"]) {
113
+ --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-xs));
114
+ --_eds-badge-empty-size-inherit: var(--eds-sp-xs);
115
+ }
116
+ :host([size="s"]) {
117
+ --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-s));
118
+ --_eds-badge-size-inherit: var(--eds-sp-m);
119
+ }
120
+ :host([size="m"]) {
121
+ --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-m));
122
+ --_eds-badge-size-inherit: var(--eds-sp-m);
123
+ }
124
+ :host([size="l"]) {
125
+ --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-l));
126
+ --_eds-badge-size-inherit: calc(var(--eds-sp-m) + var(--eds-sp-3xs));
127
+ }
128
+ :host([size="xl"]) {
129
+ --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-xl));
130
+ --_eds-badge-size-inherit: calc(var(--eds-sp-m) + var(--eds-sp-2xs));
131
+ }
132
+ :host([size="2xl"]) {
133
+ --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-2xl));
134
+ --_eds-badge-size-inherit: var(--eds-sp-l);
135
+ }
136
+ :host([size="3xl"]) {
137
+ --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-3xl));
138
+ --_eds-badge-size-inherit: calc(var(--eds-sp-l) + var(--eds-sp-2xs));
139
+ }
140
+ :host([size="4xl"]) {
141
+ --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-4xl));
142
+ --_eds-badge-size-inherit: var(--eds-sp-xl);
143
+ }
112
144
 
113
145
  /* COLOR VARIANTS */
114
- :host([color="neutral"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground)); }
115
- :host([color="neutral-subtle"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle)); }
116
- :host([color="neutral-subtler"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler)); }
117
- :host([color="primary"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary)); }
118
- :host([color="highlight"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight)); }
119
- :host([color="info"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info)); }
120
- :host([color="success"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success)); }
121
- :host([color="warning"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning)); }
122
- :host([color="critical"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical)); }
123
- :host([color="brand"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand)); }
124
- :host([color="disabled"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled)); }
146
+ :host([color="neutral"]) { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground)); }
147
+ :host([color="neutral-subtle"]) { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-subtle)); }
148
+ :host([color="neutral-subtler"]) { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-subtler)); }
149
+ :host([color="primary"]) { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-primary)); }
150
+ :host([color="highlight"]) { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-highlight)); }
151
+ :host([color="info"]) { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-info)); }
152
+ :host([color="success"]) { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-success)); }
153
+ :host([color="warning"]) { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-warning)); }
154
+ :host([color="critical"]) { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-critical)); }
155
+ :host([color="brand"]) { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-on-surface-brand)); }
156
+ :host([color="disabled"]) { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-disabled)); }
125
157
 
126
158
  .eds-icon-svg {
127
159
  height: var(--_eds-icon-size);
@@ -150,8 +182,8 @@ let EdsWcIcon = class EdsWcIcon extends EdsBaseElement {
150
182
  display: inline-block;
151
183
  width: var(--_eds-icon-size);
152
184
  height: var(--_eds-icon-size);
153
- border: 3px solid var(--eds-c-border-neutral-subtle);
154
- border-top-color: var(--_eds-icon-color);
185
+ border: 3px solid var(--eds-c-border-divider);
186
+ border-top-color: var(--eds-c-border-primary);
155
187
  border-radius: 50%;
156
188
  animation: eds-icon-spin 0.6s linear infinite;
157
189
  }
@@ -1 +1 @@
1
- {"version":3,"file":"eds-wc-icon.js","sourceRoot":"","sources":["../../src/eds-icon/eds-wc-icon.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"eds-wc-icon.js","sourceRoot":"","sources":["../../src/eds-icon/eds-wc-icon.ts"],"names":[],"mappings":"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"}
@@ -125,8 +125,8 @@ let EdsWcIconButton = class EdsWcIconButton extends EdsBaseElement {
125
125
  }
126
126
 
127
127
  :host([color="neutral"]) {
128
- --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle--hover));
129
- --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle--hover));
128
+ --_eds-icon-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtler));
129
+ --_eds-icon-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtler));
130
130
  }
131
131
 
132
132
  :host([color="info"]) {
@@ -1,30 +1,108 @@
1
1
  import { EdsBaseElement } from '../shared/eds-base.js';
2
+ /** Resolved button position (mirrors the Angular `position` computed value). */
3
+ export type EdsWcInputButtonPosition = 'start' | 'end';
2
4
  /**
3
5
  * `<eds-wc-input-button>` — EDS Input Button Web Component.
4
6
  *
5
- * Combines a text input with a button, sharing a common border.
7
+ * A layout component that positions a button relative to an input field, sharing a common border,
8
+ * and manages focus across the group with a **roving tabindex** so the group is a single tab stop.
9
+ * 1:1 projection of the Angular `eds-input-button` component (which is no longer a pure layout
10
+ * wrapper — it owns the roving-tabindex focus model).
11
+ *
12
+ * ### Focus model (roving tabindex)
13
+ * - The group is a SINGLE tab stop: on render every projected focusable control gets
14
+ * `tabindex="-1"` EXCEPT the primary control (the first input/textarea/select) which gets
15
+ * `tabindex="0"`, so `Tab` lands directly on the input.
16
+ * - Arrow keys rove focus between the group's controls in DOM order — the input, the clearable
17
+ * "✕" icon (`.eds-clearable-icon`, present only while the field has a value), and the button.
18
+ * `ArrowRight`/`ArrowDown` → next (wrap to first); `ArrowLeft`/`ArrowUp` → previous (wrap to
19
+ * last); `Home` → first; `End` → last. All of these `preventDefault`.
20
+ * - The managed-children set is recomputed live and EXCLUDES disabled and not-currently-visible
21
+ * controls (the clearable icon is `visibility:hidden` when empty → skipped then).
22
+ * - `focusin` on a child adopts it as the active roving target and moves the single `tabindex="0"`
23
+ * onto it, so a subsequent `Tab` LEAVES the group from wherever focus is (no trap). `Tab` is not
24
+ * intercepted.
25
+ *
26
+ * ### Slot model (differs from Angular)
27
+ * In Angular the host queries its own light-DOM descendants
28
+ * (`host.querySelectorAll('input,button,select,textarea,.eds-clearable-icon')`). In the WC the
29
+ * children arrive via `<slot>`, so the managed set is read from the slots' assigned elements
30
+ * (`slot.assignedElements({flatten:true})`, descending into each for focusables + the clearable
31
+ * icon) rather than `this.querySelectorAll`.
6
32
  *
7
33
  * @example
8
34
  * ```html
9
35
  * <eds-wc-input-button>
10
- * <eds-wc-input-text slot="input" placeholder="Search..."></eds-wc-input-text>
36
+ * <eds-wc-input-text placeholder="Search..."></eds-wc-input-text>
11
37
  * <eds-wc-button slot="button" type="secondary" color="neutral" size="m">Go</eds-wc-button>
12
38
  * </eds-wc-input-button>
13
39
  *
14
40
  * <eds-wc-input-button position="start">
15
- * <eds-wc-input-text slot="input" placeholder="Search..."></eds-wc-input-text>
16
- * <eds-wc-button slot="button" type="secondary" color="neutral" size="m">Go</eds-wc-button>
41
+ * <eds-wc-input-text placeholder="Filter..."></eds-wc-input-text>
42
+ * <eds-wc-icon-button slot="button" icon="filter" aria-label="Filter"></eds-wc-icon-button>
17
43
  * </eds-wc-input-button>
18
44
  * ```
19
45
  *
20
- * @slot input - The input element
21
- * @slot button - The button element
46
+ * @slot - Default slot for the input (and its injected clearable "✕" icon).
47
+ * @slot button - The trailing/leading button (text `eds-wc-button` or `eds-wc-icon-button`).
22
48
  */
23
49
  export declare class EdsWcInputButton extends EdsBaseElement {
24
- /** Button position: 'end' (default) or 'start'. */
25
- position: 'start' | 'end';
50
+ /**
51
+ * Data attribute value for end-to-end testing identification.
52
+ * @default 'eds-input-button'
53
+ */
54
+ e2eAttr: string;
55
+ /**
56
+ * Resolved button position, reflected as the `position` host attribute. `start` reverses the
57
+ * layout direction and moves the shared border/divider to the opposite edge; `end` (default)
58
+ * places the button after the input.
59
+ * @default 'end'
60
+ */
61
+ position: EdsWcInputButtonPosition;
62
+ /** Index (within the managed-children list) of the roving active control. */
63
+ private _activeIndex;
64
+ connectedCallback(): void;
26
65
  static styles: import("lit").CSSResult;
27
66
  protected render(): import("lit-html").TemplateResult<1>;
67
+ /**
68
+ * The group's controls that participate in arrow-key roving, in DOM order (default slot first,
69
+ * then the button slot): the projected input/button plus the clearable "✕" icon
70
+ * (`.eds-clearable-icon`). Disabled and not-currently-rendered controls (e.g. the hidden
71
+ * clearable icon when the field is empty) are excluded so the cycle only visits reachable
72
+ * targets.
73
+ *
74
+ * Reads the slots' assigned elements (NOT `this.querySelectorAll`) and descends into each — the
75
+ * focusable may be a native control inside a composed WC (e.g. the `<input>` inside
76
+ * `eds-wc-input-text`'s shadow root) or a slotted light-DOM node.
77
+ */
78
+ private _managedChildren;
79
+ /**
80
+ * Index of the primary control that owns the natural tab stop — the input field (first
81
+ * `input`/`textarea`/`select`) — so `Tab` lands directly on it. Falls back to the first child
82
+ * when there is no input-like control.
83
+ */
84
+ private _primaryIndex;
85
+ /**
86
+ * Roving tabindex reset: the primary (input) control stays in the natural tab order so `Tab`
87
+ * focuses it directly; every other control is reachable only via the arrow keys.
88
+ */
89
+ private _resetRovingTabStop;
90
+ private _onSlotChange;
91
+ /**
92
+ * Track focus entering a projected control so the arrow keys continue from the control the user
93
+ * is actually on (e.g. after a click), and keep the roving tab stop in sync so a subsequent
94
+ * `Tab` leaves from here.
95
+ */
96
+ private _onFocusIn;
97
+ private _onKeydown;
98
+ private _nextIndex;
99
+ private _focusChild;
100
+ /**
101
+ * Move the single roving tab stop (`tabindex="0"`) onto the active control and set every other
102
+ * control to `tabindex="-1"`, so after arrow navigation `Tab` leaves the group from wherever
103
+ * focus currently is.
104
+ */
105
+ private _setActive;
28
106
  }
29
107
  declare global {
30
108
  interface HTMLElementTagNameMap {
@@ -1 +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"}
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,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"}
@@ -10,44 +10,306 @@ import { EdsBaseElement } from '../shared/eds-base.js';
10
10
  /**
11
11
  * `<eds-wc-input-button>` — EDS Input Button Web Component.
12
12
  *
13
- * Combines a text input with a button, sharing a common border.
13
+ * A layout component that positions a button relative to an input field, sharing a common border,
14
+ * and manages focus across the group with a **roving tabindex** so the group is a single tab stop.
15
+ * 1:1 projection of the Angular `eds-input-button` component (which is no longer a pure layout
16
+ * wrapper — it owns the roving-tabindex focus model).
17
+ *
18
+ * ### Focus model (roving tabindex)
19
+ * - The group is a SINGLE tab stop: on render every projected focusable control gets
20
+ * `tabindex="-1"` EXCEPT the primary control (the first input/textarea/select) which gets
21
+ * `tabindex="0"`, so `Tab` lands directly on the input.
22
+ * - Arrow keys rove focus between the group's controls in DOM order — the input, the clearable
23
+ * "✕" icon (`.eds-clearable-icon`, present only while the field has a value), and the button.
24
+ * `ArrowRight`/`ArrowDown` → next (wrap to first); `ArrowLeft`/`ArrowUp` → previous (wrap to
25
+ * last); `Home` → first; `End` → last. All of these `preventDefault`.
26
+ * - The managed-children set is recomputed live and EXCLUDES disabled and not-currently-visible
27
+ * controls (the clearable icon is `visibility:hidden` when empty → skipped then).
28
+ * - `focusin` on a child adopts it as the active roving target and moves the single `tabindex="0"`
29
+ * onto it, so a subsequent `Tab` LEAVES the group from wherever focus is (no trap). `Tab` is not
30
+ * intercepted.
31
+ *
32
+ * ### Slot model (differs from Angular)
33
+ * In Angular the host queries its own light-DOM descendants
34
+ * (`host.querySelectorAll('input,button,select,textarea,.eds-clearable-icon')`). In the WC the
35
+ * children arrive via `<slot>`, so the managed set is read from the slots' assigned elements
36
+ * (`slot.assignedElements({flatten:true})`, descending into each for focusables + the clearable
37
+ * icon) rather than `this.querySelectorAll`.
14
38
  *
15
39
  * @example
16
40
  * ```html
17
41
  * <eds-wc-input-button>
18
- * <eds-wc-input-text slot="input" placeholder="Search..."></eds-wc-input-text>
42
+ * <eds-wc-input-text placeholder="Search..."></eds-wc-input-text>
19
43
  * <eds-wc-button slot="button" type="secondary" color="neutral" size="m">Go</eds-wc-button>
20
44
  * </eds-wc-input-button>
21
45
  *
22
46
  * <eds-wc-input-button position="start">
23
- * <eds-wc-input-text slot="input" placeholder="Search..."></eds-wc-input-text>
24
- * <eds-wc-button slot="button" type="secondary" color="neutral" size="m">Go</eds-wc-button>
47
+ * <eds-wc-input-text placeholder="Filter..."></eds-wc-input-text>
48
+ * <eds-wc-icon-button slot="button" icon="filter" aria-label="Filter"></eds-wc-icon-button>
25
49
  * </eds-wc-input-button>
26
50
  * ```
27
51
  *
28
- * @slot input - The input element
29
- * @slot button - The button element
52
+ * @slot - Default slot for the input (and its injected clearable "✕" icon).
53
+ * @slot button - The trailing/leading button (text `eds-wc-button` or `eds-wc-icon-button`).
30
54
  */
31
55
  let EdsWcInputButton = class EdsWcInputButton extends EdsBaseElement {
32
56
  constructor() {
33
57
  super(...arguments);
34
- /** Button position: 'end' (default) or 'start'. */
58
+ /**
59
+ * Data attribute value for end-to-end testing identification.
60
+ * @default 'eds-input-button'
61
+ */
62
+ this.e2eAttr = 'eds-input-button';
63
+ /**
64
+ * Resolved button position, reflected as the `position` host attribute. `start` reverses the
65
+ * layout direction and moves the shared border/divider to the opposite edge; `end` (default)
66
+ * places the button after the input.
67
+ * @default 'end'
68
+ */
35
69
  this.position = 'end';
70
+ /** Index (within the managed-children list) of the roving active control. */
71
+ this._activeIndex = 0;
72
+ }
73
+ connectedCallback() {
74
+ super.connectedCallback();
75
+ this.setAttribute('role', 'group');
36
76
  }
37
77
  static { this.styles = css `
38
- :host { display: flex; width: 100%; border-radius: var(--eds-br-s); }
39
- :host([position="start"]) { flex-direction: row-reverse; }
78
+ :host, *, *::before, *::after {
79
+ box-sizing: border-box;
80
+ }
81
+
82
+ :host {
83
+ display: flex;
84
+ width: 100%;
85
+ border-radius: var(--eds-br-s);
86
+ outline: none;
87
+ position: relative;
88
+ }
89
+
90
+ /* The input fills all space left of the button; the button keeps its intrinsic width.
91
+ \`order\` makes the layout independent of DOM order: input first (grows), then the
92
+ collapsed clear-icon wrapper at the input's trailing edge, then the button. In Shadow
93
+ DOM these target the top-level slotted nodes via ::slotted(...). */
94
+ ::slotted(eds-wc-input-text),
95
+ ::slotted(input),
96
+ ::slotted(.eds-input-text) {
97
+ flex: 1 1 auto;
98
+ min-width: 0;
99
+ order: 1;
100
+ }
101
+
102
+ ::slotted([slot="button"]) {
103
+ flex: 0 0 auto;
104
+ order: 3;
105
+ }
106
+
107
+ /*
108
+ * Clearable-wrapper handling (Angular SCSS used \`order\` + \`:has()\` to grow the
109
+ * input/the wrapper-containing-input, collapse an empty icon-only wrapper to zero width at
110
+ * the input's trailing edge, and keep the button intrinsic). LIMITATION: Shadow-DOM
111
+ * \`::slotted()\` only matches the TOP-LEVEL slotted node and cannot use \`:has()\` to
112
+ * inspect a slotted node's own descendants, so the full Angular wrapper logic cannot be
113
+ * reproduced selector-for-selector. In this WC the clearable "✕" is rendered INSIDE
114
+ * \`eds-wc-input-text\`'s own shadow root (absolutely positioned at the input's right
115
+ * edge), so there is no injected top-level wrapper element at the group level to collapse —
116
+ * the single \`::slotted(eds-wc-input-text)\` grow rule above is sufficient to make the
117
+ * group fill its width with the clear icon anchored inside the input.
118
+ */
119
+
120
+ /* Whole-group focus ring whenever focus is on one of the projected controls. */
121
+ :host(:focus-within) {
122
+ outline: var(--eds-bw-s) solid var(--eds-c-border-focus);
123
+ outline-offset: var(--eds-bw-s);
124
+ }
125
+
126
+ /* Critical / invalid state → the whole-group focus ring turns critical. The invalid signal
127
+ is the projected input's \`invalid\` attribute (standalone usage) or a reflected
128
+ \`invalid\` host attribute set by a composing parent such as eds-input-password. */
129
+ :host([invalid]:focus-within),
130
+ :host(:focus-within:has(::slotted([invalid]))) {
131
+ outline-color: var(--eds-c-focus-critical);
132
+ }
133
+
134
+ /* The projected button reads as a raised field affordance joined to the input. */
135
+ ::slotted([slot="button"]) {
136
+ position: relative;
137
+ }
138
+
139
+ /*
140
+ * Suppressing the input's own focus ring (so only the one group ring shows) and drawing the
141
+ * button's INSET critical-aware ring are handled inside the slotted components' OWN shadow
142
+ * roots in this WC: \`eds-wc-input-text\` renders a borderless field (its visual border is
143
+ * the group's), and \`eds-wc-button\`/\`eds-wc-icon-button\` draw their own
144
+ * \`:focus-visible\` outline. LIMITATION: Shadow-DOM \`::slotted()\` reaches only the
145
+ * top-level slotted node, so the Angular \`!important\` overrides that reached INTO the
146
+ * projected input/button (\`.eds-input-text:focus-visible\`, \`.eds-button:focus\`) cannot
147
+ * be reproduced from here. The intent (single group ring; inset ring on the focused button;
148
+ * critical color when invalid) is preserved by the sibling components' own styles plus the
149
+ * group \`:focus-within\` ring above.
150
+ */
40
151
 
41
- ::slotted([slot="input"]) { flex: 1; min-width: 0; }
42
- ::slotted([slot="button"]) { flex-shrink: 0; }
152
+ /* Position variants — reflected as the \`position\` host attribute. */
153
+ :host([position="start"]) {
154
+ flex-direction: row-reverse;
155
+ }
156
+
157
+ :host([position="start"]) ::slotted([slot="button"]) {
158
+ border-right: none;
159
+ border-top-right-radius: 0;
160
+ border-bottom-right-radius: 0;
161
+ }
162
+
163
+ :host([position="end"]) ::slotted([slot="button"]) {
164
+ border-left: none;
165
+ border-top-left-radius: 0;
166
+ border-bottom-left-radius: 0;
167
+ }
43
168
  `; }
44
169
  render() {
45
170
  return html `
46
- <slot name="input"></slot>
47
- <slot name="button"></slot>
171
+ <slot
172
+ @slotchange="${this._onSlotChange}"
173
+ @focusin="${this._onFocusIn}"
174
+ @keydown="${this._onKeydown}"></slot>
175
+ <slot
176
+ name="button"
177
+ @slotchange="${this._onSlotChange}"
178
+ @focusin="${this._onFocusIn}"
179
+ @keydown="${this._onKeydown}"></slot>
48
180
  `;
49
181
  }
182
+ /**
183
+ * The group's controls that participate in arrow-key roving, in DOM order (default slot first,
184
+ * then the button slot): the projected input/button plus the clearable "✕" icon
185
+ * (`.eds-clearable-icon`). Disabled and not-currently-rendered controls (e.g. the hidden
186
+ * clearable icon when the field is empty) are excluded so the cycle only visits reachable
187
+ * targets.
188
+ *
189
+ * Reads the slots' assigned elements (NOT `this.querySelectorAll`) and descends into each — the
190
+ * focusable may be a native control inside a composed WC (e.g. the `<input>` inside
191
+ * `eds-wc-input-text`'s shadow root) or a slotted light-DOM node.
192
+ */
193
+ _managedChildren() {
194
+ const selector = 'input, button, select, textarea, .eds-clearable-icon';
195
+ const slots = this.shadowRoot?.querySelectorAll('slot') ?? [];
196
+ const found = [];
197
+ for (const slot of Array.from(slots)) {
198
+ for (const assigned of slot.assignedElements({ flatten: true })) {
199
+ const el = assigned;
200
+ // The assigned node may itself be a focusable, OR expose focusables in its shadow
201
+ // root (composed WCs like eds-wc-input-text / eds-wc-icon-button), OR contain them
202
+ // in light DOM.
203
+ if (el.matches(selector)) {
204
+ found.push(el);
205
+ }
206
+ const root = el.shadowRoot ?? el;
207
+ root.querySelectorAll(selector).forEach((c) => found.push(c));
208
+ }
209
+ }
210
+ return found.filter((el) => {
211
+ if (el.hasAttribute('disabled')) {
212
+ return false;
213
+ }
214
+ // Skip controls that are not actually visible/rendered — notably the clearable icon,
215
+ // which is hidden (visibility:hidden) when empty.
216
+ if (getComputedStyle(el).visibility === 'hidden') {
217
+ return false;
218
+ }
219
+ return el.offsetParent !== null || getComputedStyle(el).position === 'fixed';
220
+ });
221
+ }
222
+ /**
223
+ * Index of the primary control that owns the natural tab stop — the input field (first
224
+ * `input`/`textarea`/`select`) — so `Tab` lands directly on it. Falls back to the first child
225
+ * when there is no input-like control.
226
+ */
227
+ _primaryIndex(children) {
228
+ const inputIndex = children.findIndex((el) => /^(input|textarea|select)$/i.test(el.tagName));
229
+ return inputIndex >= 0 ? inputIndex : 0;
230
+ }
231
+ /**
232
+ * Roving tabindex reset: the primary (input) control stays in the natural tab order so `Tab`
233
+ * focuses it directly; every other control is reachable only via the arrow keys.
234
+ */
235
+ _resetRovingTabStop() {
236
+ const children = this._managedChildren();
237
+ if (children.length === 0) {
238
+ return;
239
+ }
240
+ const primary = this._primaryIndex(children);
241
+ this._activeIndex = primary;
242
+ children.forEach((el, index) => el.setAttribute('tabindex', index === primary ? '0' : '-1'));
243
+ }
244
+ _onSlotChange() {
245
+ this._resetRovingTabStop();
246
+ }
247
+ /**
248
+ * Track focus entering a projected control so the arrow keys continue from the control the user
249
+ * is actually on (e.g. after a click), and keep the roving tab stop in sync so a subsequent
250
+ * `Tab` leaves from here.
251
+ */
252
+ _onFocusIn(event) {
253
+ const children = this._managedChildren();
254
+ const path = event.composedPath();
255
+ const index = children.findIndex((el) => path.includes(el));
256
+ if (index >= 0) {
257
+ this._setActive(index, children);
258
+ }
259
+ }
260
+ _onKeydown(event) {
261
+ const children = this._managedChildren();
262
+ if (children.length === 0) {
263
+ return;
264
+ }
265
+ switch (event.key) {
266
+ case 'ArrowRight':
267
+ case 'ArrowDown':
268
+ event.preventDefault();
269
+ this._focusChild(this._nextIndex(1, children), children);
270
+ break;
271
+ case 'ArrowLeft':
272
+ case 'ArrowUp':
273
+ event.preventDefault();
274
+ this._focusChild(this._nextIndex(-1, children), children);
275
+ break;
276
+ case 'Home':
277
+ event.preventDefault();
278
+ this._focusChild(0, children);
279
+ break;
280
+ case 'End':
281
+ event.preventDefault();
282
+ this._focusChild(children.length - 1, children);
283
+ break;
284
+ default:
285
+ break;
286
+ }
287
+ }
288
+ _nextIndex(delta, children) {
289
+ const count = children.length;
290
+ return (this._activeIndex + delta + count) % count;
291
+ }
292
+ _focusChild(index, children) {
293
+ const target = children[index];
294
+ if (!target) {
295
+ return;
296
+ }
297
+ this._setActive(index, children);
298
+ target.focus();
299
+ }
300
+ /**
301
+ * Move the single roving tab stop (`tabindex="0"`) onto the active control and set every other
302
+ * control to `tabindex="-1"`, so after arrow navigation `Tab` leaves the group from wherever
303
+ * focus currently is.
304
+ */
305
+ _setActive(index, children) {
306
+ this._activeIndex = index;
307
+ children.forEach((el, i) => el.setAttribute('tabindex', i === index ? '0' : '-1'));
308
+ }
50
309
  };
310
+ __decorate([
311
+ property({ type: String, attribute: 'data-e2e', reflect: true })
312
+ ], EdsWcInputButton.prototype, "e2eAttr", void 0);
51
313
  __decorate([
52
314
  property({ type: String, reflect: true })
53
315
  ], EdsWcInputButton.prototype, "position", void 0);
@@ -1 +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"}
1
+ {"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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"}
@@ -1,2 +1,3 @@
1
- export { EdsWcInputButton } from './eds-wc-input-button.js';
1
+ export { EdsWcInputButton } from './eds-wc-input-button';
2
+ export type { EdsWcInputButtonPosition } from './eds-wc-input-button';
2
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-input-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-input-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC"}
@@ -1,2 +1,2 @@
1
- export { EdsWcInputButton } from './eds-wc-input-button.js';
1
+ export { EdsWcInputButton } from './eds-wc-input-button';
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-input-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-input-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}