@eui/eds-wc 22.0.0-alpha.29 → 22.0.0-alpha.30

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 (48) hide show
  1. package/eds-breadcrumb/eds-wc-breadcrumb.d.ts +7 -1
  2. package/eds-breadcrumb/eds-wc-breadcrumb.d.ts.map +1 -1
  3. package/eds-breadcrumb/eds-wc-breadcrumb.js +21 -7
  4. package/eds-breadcrumb/eds-wc-breadcrumb.js.map +1 -1
  5. package/eds-button/eds-wc-button.d.ts +41 -17
  6. package/eds-button/eds-wc-button.d.ts.map +1 -1
  7. package/eds-button/eds-wc-button.js +172 -150
  8. package/eds-button/eds-wc-button.js.map +1 -1
  9. package/eds-button/index.d.ts +2 -2
  10. package/eds-button/index.d.ts.map +1 -1
  11. package/eds-button/index.js +1 -1
  12. package/eds-button/index.js.map +1 -1
  13. package/eds-chat-bubble/eds-wc-chat-bubble.d.ts +83 -0
  14. package/eds-chat-bubble/eds-wc-chat-bubble.d.ts.map +1 -0
  15. package/eds-chat-bubble/eds-wc-chat-bubble.js +238 -0
  16. package/eds-chat-bubble/eds-wc-chat-bubble.js.map +1 -0
  17. package/eds-chat-bubble/index.d.ts +3 -0
  18. package/eds-chat-bubble/index.d.ts.map +1 -0
  19. package/eds-chat-bubble/index.js +2 -0
  20. package/eds-chat-bubble/index.js.map +1 -0
  21. package/eds-input-prompt/eds-wc-input-prompt.d.ts +97 -0
  22. package/eds-input-prompt/eds-wc-input-prompt.d.ts.map +1 -0
  23. package/eds-input-prompt/eds-wc-input-prompt.js +363 -0
  24. package/eds-input-prompt/eds-wc-input-prompt.js.map +1 -0
  25. package/eds-input-prompt/index.d.ts +3 -0
  26. package/eds-input-prompt/index.d.ts.map +1 -0
  27. package/eds-input-prompt/index.js +2 -0
  28. package/eds-input-prompt/index.js.map +1 -0
  29. package/eds-segmented-control/eds-wc-segmented-control.d.ts +67 -0
  30. package/eds-segmented-control/eds-wc-segmented-control.d.ts.map +1 -0
  31. package/{eds-button-group/eds-wc-button-group.js → eds-segmented-control/eds-wc-segmented-control.js} +40 -35
  32. package/eds-segmented-control/eds-wc-segmented-control.js.map +1 -0
  33. package/eds-segmented-control/index.d.ts +3 -0
  34. package/eds-segmented-control/index.d.ts.map +1 -0
  35. package/eds-segmented-control/index.js +2 -0
  36. package/eds-segmented-control/index.js.map +1 -0
  37. package/index.d.ts +7 -2
  38. package/index.d.ts.map +1 -1
  39. package/index.js +3 -1
  40. package/index.js.map +1 -1
  41. package/package.json +12 -4
  42. package/eds-button-group/eds-wc-button-group.d.ts +0 -62
  43. package/eds-button-group/eds-wc-button-group.d.ts.map +0 -1
  44. package/eds-button-group/eds-wc-button-group.js.map +0 -1
  45. package/eds-button-group/index.d.ts +0 -2
  46. package/eds-button-group/index.d.ts.map +0 -1
  47. package/eds-button-group/index.js +0 -2
  48. package/eds-button-group/index.js.map +0 -1
package/eds-button/eds-wc-button.js CHANGED
@@ -7,22 +7,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { html, css } from 'lit';
8
8
  import { customElement, property } from 'lit/decorators.js';
9
9
  import { EdsBaseElement } from '../shared/eds-base.js';
10
- import { ColorMixin } from '../shared/color-mixin.js';
11
- import { SizeMixin } from '../shared/size-mixin.js';
12
10
  /**
13
11
  * `<eds-wc-button>` — EDS Button Web Component.
14
12
  *
15
13
  * A fully styled button supporting multiple visual types (primary, secondary, tertiary),
16
- * color variants, sizes, and modifiers (rounded, block, icon-only).
14
+ * color variants, sizes, and modifiers (rounded, block, line-wrap). Mirrors the Angular
15
+ * `button[edsButton]` component's String-Props API 1:1: `variant` (reflected as the
16
+ * `type-variant` attribute, matching the Angular `[attr.type-variant]` host binding),
17
+ * `color`, `size`, and the reflected boolean state attributes `rounded` / `block` /
18
+ * `line-wrap` / `disabled`.
17
19
  *
18
20
  * Unlike the Angular `button[edsButton]` directive which decorates a native `<button>`,
19
- * this web component renders its own internal `<button>` element and delegates focus/click.
21
+ * this web component renders its own internal `<button>` element.
20
22
  *
21
23
  * @example
22
24
  * ```html
23
- * <eds-wc-button type="primary" color="primary" size="m">Submit</eds-wc-button>
24
- * <eds-wc-button type="secondary" color="neutral" size="s">Cancel</eds-wc-button>
25
- * <eds-wc-button type="tertiary" color="critical" disabled>Delete</eds-wc-button>
25
+ * <eds-wc-button color="primary" size="m">Submit</eds-wc-button>
26
+ * <eds-wc-button type-variant="secondary" color="neutral" size="s">Cancel</eds-wc-button>
27
+ * <eds-wc-button type-variant="tertiary" color="critical" disabled>Delete</eds-wc-button>
26
28
  * ```
27
29
  *
28
30
  * @slot - Button content (label text, icons, etc.)
@@ -30,27 +32,41 @@ import { SizeMixin } from '../shared/size-mixin.js';
30
32
  * @csspart button - The internal `<button>` element
31
33
  * @csspart container - The inner flex container wrapping slotted content
32
34
  */
33
- let EdsWcButton = class EdsWcButton extends SizeMixin(ColorMixin(EdsBaseElement)) {
35
+ let EdsWcButton = class EdsWcButton extends EdsBaseElement {
34
36
  constructor() {
35
37
  super(...arguments);
36
38
  /**
37
- * Visual type of the button.
39
+ * Visual type of the button. Reflected as the `type-variant` attribute (matching the
40
+ * Angular `variant` input / `[attr.type-variant]` host binding).
38
41
  * @default 'primary'
39
42
  */
40
- this.type = 'primary';
43
+ this.variant = 'primary';
44
+ /**
45
+ * Semantic color of the button.
46
+ * @default 'primary'
47
+ */
48
+ this.color = 'primary';
49
+ /**
50
+ * Size of the button.
51
+ * @default 'm'
52
+ */
53
+ this.size = 'm';
41
54
  /**
42
55
  * Whether the button is disabled.
43
56
  * Reflects to the internal `<button>` element's `disabled` attribute.
44
57
  */
45
58
  this.disabled = false;
46
- /** Makes the button full-width (block-level). */
59
+ /** Makes the button full-width (block-level). Mirrors the Angular `isBlock` input. */
47
60
  this.block = false;
48
- /** Styles the button for icon-only content (square aspect ratio). */
49
- this.iconOnly = false;
50
- /** Applies fully rounded border-radius. */
61
+ /** Applies a fully rounded border-radius. Mirrors the Angular `isRounded` input. */
51
62
  this.rounded = false;
52
- /** Allows text content to wrap. */
63
+ /** Allows text content to wrap. Mirrors the Angular `hasLineWrap` input. */
53
64
  this.lineWrap = false;
65
+ /**
66
+ * Marks the button as initially checked/selected within an `eds-wc-button-group`.
67
+ * Mirrors the Angular `isChecked` input; read by a parent group.
68
+ */
69
+ this.checked = false;
54
70
  }
55
71
  static { this.styles = css `
56
72
  :host {
@@ -86,29 +102,29 @@ let EdsWcButton = class EdsWcButton extends SizeMixin(ColorMixin(EdsBaseElement)
86
102
  width: 100%;
87
103
 
88
104
  /* Token-driven */
89
- background-color: var(--_surface);
90
- color: var(--_on-surface);
91
- border-width: var(--_border-width);
92
- border-color: var(--_border-color);
93
- font-size: var(--_font-size);
94
- min-height: var(--_size);
95
- min-width: var(--_size);
96
- padding: var(--_padding);
105
+ background-color: var(--_eds-button-surface);
106
+ color: var(--_eds-button-on-surface);
107
+ border-width: var(--_eds-button-border-width);
108
+ border-color: var(--_eds-button-border-color);
109
+ font-size: var(--_eds-button-font-size);
110
+ min-height: var(--_eds-button-size);
111
+ min-width: var(--_eds-button-size);
112
+ padding: var(--_eds-button-padding);
97
113
  }
98
114
 
99
115
  button:hover {
100
- background-color: var(--_surface-hover);
101
- color: var(--_on-surface-hover);
116
+ background-color: var(--_eds-button-surface-hover);
117
+ color: var(--_eds-button-on-surface-hover);
102
118
  }
103
119
 
104
120
  button:active {
105
- background-color: var(--_surface-active);
106
- color: var(--_on-surface-active);
121
+ background-color: var(--_eds-button-surface-active);
122
+ color: var(--_eds-button-on-surface-active);
107
123
  }
108
124
 
109
125
  button:focus-visible {
110
- outline: 2px solid var(--eds-c-border-focus);
111
- outline-offset: 2px;
126
+ outline: var(--eds-bw-s) solid var(--eds-c-border-primary);
127
+ outline-offset: 1px;
112
128
  }
113
129
 
114
130
  button:disabled {
@@ -125,151 +141,151 @@ let EdsWcButton = class EdsWcButton extends SizeMixin(ColorMixin(EdsBaseElement)
125
141
  }
126
142
 
127
143
  /* --- TYPE: PRIMARY --- */
128
- :host([type="primary"]) {
129
- --_border-width: var(--eds-bw-none);
130
- --_border-color: transparent;
144
+ :host([type-variant="primary"]) {
145
+ --_eds-button-border-width: var(--eds-bw-none);
146
+ --_eds-button-border-color: transparent;
131
147
  }
132
- :host([type="primary"][color="primary"]) {
133
- --_surface: var(--eds-c-surface-primary);
134
- --_on-surface: var(--eds-c-on-surface-primary);
135
- --_surface-hover: var(--eds-c-surface-primary--hover);
136
- --_on-surface-hover: var(--eds-c-on-surface-primary--hover);
137
- --_surface-active: var(--eds-c-surface-primary--pressed);
138
- --_on-surface-active: var(--eds-c-on-surface-primary--pressed);
148
+ :host([type-variant="primary"][color="primary"]) {
149
+ --_eds-button-surface: var(--eds-c-surface-primary);
150
+ --_eds-button-on-surface: var(--eds-c-on-surface-primary);
151
+ --_eds-button-surface-hover: var(--eds-c-surface-primary--hover);
152
+ --_eds-button-on-surface-hover: var(--eds-c-on-surface-primary--hover);
153
+ --_eds-button-surface-active: var(--eds-c-surface-primary--pressed);
154
+ --_eds-button-on-surface-active: var(--eds-c-on-surface-primary--pressed);
139
155
  }
140
- :host([type="primary"][color="highlight"]) {
141
- --_surface: var(--eds-c-surface-highlight);
142
- --_on-surface: var(--eds-c-on-surface-highlight);
143
- --_surface-hover: var(--eds-c-surface-highlight--hover);
144
- --_on-surface-hover: var(--eds-c-on-surface-highlight--hover);
145
- --_surface-active: var(--eds-c-surface-highlight--pressed);
146
- --_on-surface-active: var(--eds-c-on-surface-highlight--pressed);
156
+ :host([type-variant="primary"][color="highlight"]) {
157
+ --_eds-button-surface: var(--eds-c-surface-highlight);
158
+ --_eds-button-on-surface: var(--eds-c-on-surface-highlight);
159
+ --_eds-button-surface-hover: var(--eds-c-surface-highlight--hover);
160
+ --_eds-button-on-surface-hover: var(--eds-c-on-surface-highlight--hover);
161
+ --_eds-button-surface-active: var(--eds-c-surface-highlight--pressed);
162
+ --_eds-button-on-surface-active: var(--eds-c-on-surface-highlight--pressed);
147
163
  }
148
- :host([type="primary"][color="critical"]) {
149
- --_surface: var(--eds-c-surface-critical);
150
- --_on-surface: var(--eds-c-on-surface-critical);
151
- --_surface-hover: var(--eds-c-surface-critical--hover);
152
- --_on-surface-hover: var(--eds-c-on-surface-critical--hover);
153
- --_surface-active: var(--eds-c-surface-critical--pressed);
154
- --_on-surface-active: var(--eds-c-on-surface-critical--pressed);
164
+ :host([type-variant="primary"][color="critical"]) {
165
+ --_eds-button-surface: var(--eds-c-surface-critical);
166
+ --_eds-button-on-surface: var(--eds-c-on-surface-critical);
167
+ --_eds-button-surface-hover: var(--eds-c-surface-critical--hover);
168
+ --_eds-button-on-surface-hover: var(--eds-c-on-surface-critical--hover);
169
+ --_eds-button-surface-active: var(--eds-c-surface-critical--pressed);
170
+ --_eds-button-on-surface-active: var(--eds-c-on-surface-critical--pressed);
155
171
  }
156
- :host([type="primary"][disabled]) {
157
- --_surface: var(--eds-c-surface-disabled);
158
- --_on-surface: var(--eds-c-foreground-disabled);
159
- --_surface-hover: var(--eds-c-surface-disabled);
160
- --_on-surface-hover: var(--eds-c-foreground-disabled);
161
- --_surface-active: var(--eds-c-surface-disabled);
162
- --_on-surface-active: var(--eds-c-foreground-disabled);
172
+ :host([type-variant="primary"][disabled]) {
173
+ --_eds-button-surface: var(--eds-c-surface-disabled);
174
+ --_eds-button-on-surface: var(--eds-c-foreground-disabled);
175
+ --_eds-button-surface-hover: var(--eds-c-surface-disabled);
176
+ --_eds-button-on-surface-hover: var(--eds-c-foreground-disabled);
177
+ --_eds-button-surface-active: var(--eds-c-surface-disabled);
178
+ --_eds-button-on-surface-active: var(--eds-c-foreground-disabled);
163
179
  }
164
180
 
165
181
  /* --- TYPE: SECONDARY --- */
166
- :host([type="secondary"]) {
167
- --_border-width: var(--eds-bw-xs);
168
- --_surface: transparent;
182
+ :host([type-variant="secondary"]) {
183
+ --_eds-button-border-width: var(--eds-bw-xs);
184
+ --_eds-button-surface: transparent;
169
185
  }
170
- :host([type="secondary"][color="primary"]) {
171
- --_border-color: var(--eds-c-border-primary);
172
- --_on-surface: var(--eds-c-foreground-primary);
173
- --_surface-hover: var(--eds-c-surface-primary-subtle);
174
- --_on-surface-hover: var(--eds-c-on-surface-primary-subtle);
175
- --_surface-active: var(--eds-c-surface-primary-subtle);
176
- --_on-surface-active: var(--eds-c-on-surface-primary-subtle);
186
+ :host([type-variant="secondary"][color="primary"]) {
187
+ --_eds-button-border-color: var(--eds-c-border-primary);
188
+ --_eds-button-on-surface: var(--eds-c-foreground-primary);
189
+ --_eds-button-surface-hover: var(--eds-c-surface-primary-subtle);
190
+ --_eds-button-on-surface-hover: var(--eds-c-on-surface-primary-subtle);
191
+ --_eds-button-surface-active: var(--eds-c-surface-primary-subtle);
192
+ --_eds-button-on-surface-active: var(--eds-c-on-surface-primary-subtle);
177
193
  }
178
- :host([type="secondary"][color="neutral"]) {
179
- --_border-color: var(--eds-c-border-neutral);
180
- --_on-surface: var(--eds-c-foreground-neutral);
181
- --_surface-hover: var(--eds-c-surface-neutral-subtle);
182
- --_on-surface-hover: var(--eds-c-on-surface-neutral-subtle);
183
- --_surface-active: var(--eds-c-surface-neutral-subtle);
184
- --_on-surface-active: var(--eds-c-on-surface-neutral-subtle);
194
+ :host([type-variant="secondary"][color="neutral"]) {
195
+ --_eds-button-border-color: var(--eds-c-border-neutral);
196
+ --_eds-button-on-surface: var(--eds-c-foreground-neutral);
197
+ --_eds-button-surface-hover: var(--eds-c-surface-neutral-subtle);
198
+ --_eds-button-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);
199
+ --_eds-button-surface-active: var(--eds-c-surface-neutral-subtle);
200
+ --_eds-button-on-surface-active: var(--eds-c-on-surface-neutral-subtle);
185
201
  }
186
- :host([type="secondary"][color="highlight"]) {
187
- --_border-color: var(--eds-c-border-highlight);
188
- --_on-surface: var(--eds-c-foreground-highlight);
189
- --_surface-hover: var(--eds-c-surface-highlight-subtler);
190
- --_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);
191
- --_surface-active: var(--eds-c-surface-highlight-subtler);
192
- --_on-surface-active: var(--eds-c-on-surface-highlight-subtler);
202
+ :host([type-variant="secondary"][color="highlight"]) {
203
+ --_eds-button-border-color: var(--eds-c-border-highlight);
204
+ --_eds-button-on-surface: var(--eds-c-foreground-highlight);
205
+ --_eds-button-surface-hover: var(--eds-c-surface-highlight-subtler);
206
+ --_eds-button-on-surface-hover: var(--eds-c-on-surface-highlight-subtler);
207
+ --_eds-button-surface-active: var(--eds-c-surface-highlight-subtler);
208
+ --_eds-button-on-surface-active: var(--eds-c-on-surface-highlight-subtler);
193
209
  }
194
- :host([type="secondary"][color="critical"]) {
195
- --_border-color: var(--eds-c-border-critical);
196
- --_on-surface: var(--eds-c-foreground-critical);
197
- --_surface-hover: var(--eds-c-surface-critical-subtler);
198
- --_on-surface-hover: var(--eds-c-on-surface-critical-subtler);
199
- --_surface-active: var(--eds-c-surface-critical-subtler);
200
- --_on-surface-active: var(--eds-c-on-surface-critical-subtler);
210
+ :host([type-variant="secondary"][color="critical"]) {
211
+ --_eds-button-border-color: var(--eds-c-border-critical);
212
+ --_eds-button-on-surface: var(--eds-c-foreground-critical);
213
+ --_eds-button-surface-hover: var(--eds-c-surface-critical-subtler);
214
+ --_eds-button-on-surface-hover: var(--eds-c-on-surface-critical-subtler);
215
+ --_eds-button-surface-active: var(--eds-c-surface-critical-subtler);
216
+ --_eds-button-on-surface-active: var(--eds-c-on-surface-critical-subtler);
201
217
  }
202
- :host([type="secondary"][disabled]) {
203
- --_border-width: var(--eds-bw-xs);
204
- --_border-color: var(--eds-c-border-disabled);
205
- --_surface: var(--eds-c-surface-elevation);
206
- --_on-surface: var(--eds-c-foreground-disabled);
207
- --_surface-hover: var(--eds-c-surface-elevation);
208
- --_on-surface-hover: var(--eds-c-foreground-disabled);
209
- --_surface-active: var(--eds-c-surface-elevation);
210
- --_on-surface-active: var(--eds-c-foreground-disabled);
218
+ :host([type-variant="secondary"][disabled]) {
219
+ --_eds-button-border-width: var(--eds-bw-xs);
220
+ --_eds-button-border-color: var(--eds-c-border-disabled);
221
+ --_eds-button-surface: var(--eds-c-surface-elevation);
222
+ --_eds-button-on-surface: var(--eds-c-foreground-disabled);
223
+ --_eds-button-surface-hover: var(--eds-c-surface-elevation);
224
+ --_eds-button-on-surface-hover: var(--eds-c-foreground-disabled);
225
+ --_eds-button-surface-active: var(--eds-c-surface-elevation);
226
+ --_eds-button-on-surface-active: var(--eds-c-foreground-disabled);
211
227
  }
212
228
 
213
229
  /* --- TYPE: TERTIARY --- */
214
- :host([type="tertiary"]) {
215
- --_border-width: var(--eds-bw-none);
216
- --_surface: transparent;
230
+ :host([type-variant="tertiary"]) {
231
+ --_eds-button-border-width: var(--eds-bw-none);
232
+ --_eds-button-surface: transparent;
217
233
  }
218
- :host([type="tertiary"][color="primary"]) {
219
- --_on-surface: var(--eds-c-foreground-primary);
220
- --_surface-hover: var(--eds-c-surface-primary-subtle);
221
- --_on-surface-hover: var(--eds-c-on-surface-primary-subtle);
222
- --_surface-active: var(--eds-c-surface-primary-subtle);
223
- --_on-surface-active: var(--eds-c-on-surface-primary-subtle);
234
+ :host([type-variant="tertiary"][color="primary"]) {
235
+ --_eds-button-on-surface: var(--eds-c-foreground-primary);
236
+ --_eds-button-surface-hover: var(--eds-c-surface-primary-subtle);
237
+ --_eds-button-on-surface-hover: var(--eds-c-on-surface-primary-subtle);
238
+ --_eds-button-surface-active: var(--eds-c-surface-primary-subtle);
239
+ --_eds-button-on-surface-active: var(--eds-c-on-surface-primary-subtle);
224
240
  }
225
- :host([type="tertiary"][color="neutral"]) {
226
- --_on-surface: var(--eds-c-foreground-neutral);
227
- --_surface-hover: var(--eds-c-surface-neutral-subtle);
228
- --_on-surface-hover: var(--eds-c-on-surface-neutral-subtle);
229
- --_surface-active: var(--eds-c-surface-neutral-subtle);
230
- --_on-surface-active: var(--eds-c-on-surface-neutral-subtle);
241
+ :host([type-variant="tertiary"][color="neutral"]) {
242
+ --_eds-button-on-surface: var(--eds-c-foreground-neutral);
243
+ --_eds-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-neutral-subtle));
244
+ --_eds-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-neutral-subtle));
245
+ --_eds-button-surface-active: var(--eds-c-surface-neutral-subtle);
246
+ --_eds-button-on-surface-active: var(--eds-c-on-surface-neutral-subtle);
231
247
  }
232
- :host([type="tertiary"][color="highlight"]) {
233
- --_on-surface: var(--eds-c-foreground-highlight);
234
- --_surface-hover: var(--eds-c-surface-highlight-subtler);
235
- --_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);
236
- --_surface-active: var(--eds-c-surface-highlight-subtler);
237
- --_on-surface-active: var(--eds-c-on-surface-highlight-subtler);
248
+ :host([type-variant="tertiary"][color="highlight"]) {
249
+ --_eds-button-on-surface: var(--eds-c-foreground-highlight);
250
+ --_eds-button-surface-hover: var(--eds-c-surface-highlight-subtler);
251
+ --_eds-button-on-surface-hover: var(--eds-c-on-surface-highlight-subtler);
252
+ --_eds-button-surface-active: var(--eds-c-surface-highlight-subtler);
253
+ --_eds-button-on-surface-active: var(--eds-c-on-surface-highlight-subtler);
238
254
  }
239
- :host([type="tertiary"][color="critical"]) {
240
- --_on-surface: var(--eds-c-foreground-critical);
241
- --_surface-hover: var(--eds-c-surface-critical-subtler);
242
- --_on-surface-hover: var(--eds-c-on-surface-critical-subtler);
243
- --_surface-active: var(--eds-c-surface-critical-subtler);
244
- --_on-surface-active: var(--eds-c-on-surface-critical-subtler);
255
+ :host([type-variant="tertiary"][color="critical"]) {
256
+ --_eds-button-on-surface: var(--eds-c-foreground-critical);
257
+ --_eds-button-surface-hover: var(--_button-surface-hover, var(--eds-c-surface-critical-subtler));
258
+ --_eds-button-on-surface-hover: var(--_button-on-surface-hover, var(--eds-c-on-surface-critical-subtler));
259
+ --_eds-button-surface-active: var(--eds-c-surface-critical-subtler);
260
+ --_eds-button-on-surface-active: var(--eds-c-on-surface-critical-subtler);
245
261
  }
246
- :host([type="tertiary"][disabled]) {
247
- --_surface: var(--eds-c-surface-elevation);
248
- --_on-surface: var(--eds-c-foreground-disabled);
249
- --_surface-hover: var(--eds-c-surface-elevation);
250
- --_on-surface-hover: var(--eds-c-foreground-disabled);
251
- --_surface-active: var(--eds-c-surface-elevation);
252
- --_on-surface-active: var(--eds-c-foreground-disabled);
262
+ :host([type-variant="tertiary"][disabled]) {
263
+ --_eds-button-surface: var(--eds-c-surface-elevation);
264
+ --_eds-button-on-surface: var(--eds-c-foreground-disabled);
265
+ --_eds-button-surface-hover: var(--eds-c-surface-elevation);
266
+ --_eds-button-on-surface-hover: var(--eds-c-foreground-disabled);
267
+ --_eds-button-surface-active: var(--eds-c-surface-elevation);
268
+ --_eds-button-on-surface-active: var(--eds-c-foreground-disabled);
253
269
  }
254
270
 
255
271
  /* --- SIZES --- */
256
272
  :host([size="s"]) {
257
- --_font-size: var(--eds-f-s-s);
258
- --_padding: 0 var(--eds-sp-2xs);
259
- --_size: var(--eds-sp-3xl);
260
- --_icon-size: var(--eds-is-s);
273
+ --_eds-button-font-size: var(--eds-f-s-s);
274
+ --_eds-button-padding: var(--eds-sp-2xs);
275
+ --_eds-button-size: var(--eds-sp-3xl);
276
+ --_eds-button-icon-size: var(--eds-is-s);
261
277
  }
262
278
  :host([size="m"]) {
263
- --_font-size: var(--eds-f-s-m);
264
- --_padding: 0 var(--eds-sp-xs);
265
- --_size: var(--eds-sp-5xl);
266
- --_icon-size: var(--eds-is-m);
279
+ --_eds-button-font-size: var(--eds-f-s-m);
280
+ --_eds-button-padding: var(--eds-sp-xs);
281
+ --_eds-button-size: var(--eds-sp-5xl);
282
+ --_eds-button-icon-size: var(--eds-is-m);
267
283
  }
268
284
  :host([size="l"]) {
269
- --_font-size: var(--eds-f-s-l);
270
- --_padding: 0 var(--eds-sp-s);
271
- --_size: var(--eds-sp-8xl);
272
- --_icon-size: var(--eds-is-m);
285
+ --_eds-button-font-size: var(--eds-f-s-l);
286
+ --_eds-button-padding: var(--eds-sp-s);
287
+ --_eds-button-size: var(--eds-sp-8xl);
288
+ --_eds-button-icon-size: var(--eds-is-m);
273
289
  }
274
290
 
275
291
  /* --- MODIFIERS --- */
@@ -297,24 +313,30 @@ let EdsWcButton = class EdsWcButton extends SizeMixin(ColorMixin(EdsBaseElement)
297
313
  `;
298
314
  }
299
315
  };
316
+ __decorate([
317
+ property({ type: String, reflect: true, attribute: 'type-variant' })
318
+ ], EdsWcButton.prototype, "variant", void 0);
319
+ __decorate([
320
+ property({ type: String, reflect: true })
321
+ ], EdsWcButton.prototype, "color", void 0);
300
322
  __decorate([
301
323
  property({ type: String, reflect: true })
302
- ], EdsWcButton.prototype, "type", void 0);
324
+ ], EdsWcButton.prototype, "size", void 0);
303
325
  __decorate([
304
326
  property({ type: Boolean, reflect: true })
305
327
  ], EdsWcButton.prototype, "disabled", void 0);
306
328
  __decorate([
307
329
  property({ type: Boolean, reflect: true })
308
330
  ], EdsWcButton.prototype, "block", void 0);
309
- __decorate([
310
- property({ type: Boolean, reflect: true, attribute: 'icon-only' })
311
- ], EdsWcButton.prototype, "iconOnly", void 0);
312
331
  __decorate([
313
332
  property({ type: Boolean, reflect: true })
314
333
  ], EdsWcButton.prototype, "rounded", void 0);
315
334
  __decorate([
316
335
  property({ type: Boolean, reflect: true, attribute: 'line-wrap' })
317
336
  ], EdsWcButton.prototype, "lineWrap", void 0);
337
+ __decorate([
338
+ property({ type: Boolean, reflect: true })
339
+ ], EdsWcButton.prototype, "checked", void 0);
318
340
  EdsWcButton = __decorate([
319
341
  customElement('eds-wc-button')
320
342
  ], EdsWcButton);
package/eds-button/eds-wc-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"eds-wc-button.js","sourceRoot":"","sources":["../../src/eds-button/eds-wc-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;AAUpD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IAA/D;;QACH;;;WAGG;QAEH,SAAI,GAAkB,SAAS,CAAC;QAEhC;;;WAGG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB,iDAAiD;QAEjD,UAAK,GAAG,KAAK,CAAC;QAEd,qEAAqE;QAErE,aAAQ,GAAG,KAAK,CAAC;QAEjB,2CAA2C;QAE3C,YAAO,GAAG,KAAK,CAAC;QAEhB,mCAAmC;QAEnC,aAAQ,GAAG,KAAK,CAAC;IAuPrB,CAAC;aArPmB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuO3B,AAvOqB,CAuOpB;IAEiB,MAAM;QACrB,OAAO,IAAI,CAAA;;;6BAGU,IAAI,CAAC,QAAQ;;;;;;SAMjC,CAAC;IACN,CAAC;;AA7QD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACV;AAOhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC1B;AAIjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC7B;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CAClD;AAIjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAC3B;AAIhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CAClD;AA7BR,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAoRvB"}
1
+ {"version":3,"file":"eds-wc-button.js","sourceRoot":"","sources":["../../src/eds-button/eds-wc-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;AAoBvD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,cAAc;IAAxC;;QACH;;;;WAIG;QAEH,YAAO,GAAoB,SAAS,CAAC;QAErC;;;WAGG;QAEH,UAAK,GAAqB,SAAS,CAAC;QAEpC;;;WAGG;QAEH,SAAI,GAAoB,GAAG,CAAC;QAE5B;;;WAGG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB,sFAAsF;QAEtF,UAAK,GAAG,KAAK,CAAC;QAEd,oFAAoF;QAEpF,YAAO,GAAG,KAAK,CAAC;QAEhB,4EAA4E;QAE5E,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;WAGG;QAEH,YAAO,GAAG,KAAK,CAAC;IAuPpB,CAAC;aArPmB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuO3B,AAvOqB,CAuOpB;IAEiB,MAAM;QACrB,OAAO,IAAI,CAAA;;;6BAGU,IAAI,CAAC,QAAQ;;;;;;SAMjC,CAAC;IACN,CAAC;;AA9RD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;4CAChC;AAOrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACN;AAOpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACd;AAO5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC1B;AAIjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC7B;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAC3B;AAIhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CAClD;AAOjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAC3B;AA/CP,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAsSvB"}
package/eds-button/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export { EdsWcButton } from './eds-wc-button.js';
2
- export type { EdsButtonType } from './eds-wc-button.js';
1
+ export { EdsWcButton } from './eds-wc-button';
2
+ export type { EdsWcButtonType, EdsWcButtonColor, EdsWcButtonSize } from './eds-wc-button';
3
3
  //# sourceMappingURL=index.d.ts.map
package/eds-button/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}
package/eds-button/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { EdsWcButton } from './eds-wc-button.js';
1
+ export { EdsWcButton } from './eds-wc-button';
2
2
  //# sourceMappingURL=index.js.map
package/eds-button/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}
package/eds-chat-bubble/eds-wc-chat-bubble.d.ts ADDED
@@ -0,0 +1,83 @@
1
+ import { LitElement } from 'lit';
2
+ import { EdsBaseElement } from '../shared/eds-base.js';
3
+ /**
4
+ * Visual treatment of the chat bubble (ported 1:1 from the Angular `EdsChatBubbleVariant`).
5
+ */
6
+ export type EdsWcChatBubbleVariant = 'primary' | 'secondary' | 'muted' | 'tinted' | 'outline' | 'ghost' | 'critical';
7
+ /** Inline alignment of the bubble within the conversation row. */
8
+ export type EdsWcChatBubbleAlign = 'start' | 'end';
9
+ /**
10
+ * `<eds-wc-chat-bubble>` — EDS Chat Bubble Web Component.
11
+ *
12
+ * A framed conversational message surface. Sizes to its content up to 80% of the container width
13
+ * (the `ghost` variant removes the max-width). Mirrors the Angular `eds-chat-bubble` 1:1:
14
+ * reflected `variant` / `align`, and the frame/color `--_eds-chat-bubble-*` privates that the
15
+ * projected `<eds-wc-chat-bubble-content>` consumes (custom properties inherit through the shadow
16
+ * boundary).
17
+ *
18
+ * @example
19
+ * ```html
20
+ * <eds-wc-chat-bubble variant="primary" align="end">
21
+ * <eds-wc-chat-bubble-content>Sounds good!</eds-wc-chat-bubble-content>
22
+ * <eds-wc-chat-bubble-reactions role="img" aria-label="Reactions: thumbs up">
23
+ * <span>👍</span>
24
+ * </eds-wc-chat-bubble-reactions>
25
+ * </eds-wc-chat-bubble>
26
+ * ```
27
+ *
28
+ * @slot - `<eds-wc-chat-bubble-content>` and/or `<eds-wc-chat-bubble-reactions>`
29
+ */
30
+ export declare class EdsWcChatBubble extends EdsBaseElement {
31
+ variant: EdsWcChatBubbleVariant;
32
+ align: EdsWcChatBubbleAlign;
33
+ static styles: import("lit").CSSResult;
34
+ protected render(): import("lit-html").TemplateResult<1>;
35
+ }
36
+ /**
37
+ * `<eds-wc-chat-bubble-content>` — the framed content surface of a chat bubble.
38
+ *
39
+ * Reads the frame/color `--_eds-chat-bubble-*` privates set by the parent `<eds-wc-chat-bubble>`
40
+ * (custom properties inherit through the shadow boundary). Set `interactive` (or project an
41
+ * `<a>` / `<button>`) for a clickable bubble — the host shows a visible focus ring.
42
+ *
43
+ * @slot - Content text or rich content
44
+ */
45
+ export declare class EdsWcChatBubbleContent extends LitElement {
46
+ /** Styles the content as an interactive surface (pointer + focus ring). */
47
+ interactive: boolean;
48
+ static styles: import("lit").CSSResult;
49
+ connectedCallback(): void;
50
+ protected render(): import("lit-html").TemplateResult<1>;
51
+ }
52
+ /**
53
+ * `<eds-wc-chat-bubble-reactions>` — an overlapping reactions row anchored to a bubble edge.
54
+ *
55
+ * @slot - Reaction glyphs or quick-action buttons
56
+ */
57
+ export declare class EdsWcChatBubbleReactions extends LitElement {
58
+ /** The bubble edge the reactions anchor to. @default 'bottom' */
59
+ side: 'top' | 'bottom';
60
+ /** Inline alignment of the reactions row. @default 'end' */
61
+ align: 'start' | 'end';
62
+ static styles: import("lit").CSSResult;
63
+ protected render(): import("lit-html").TemplateResult<1>;
64
+ }
65
+ /**
66
+ * `<eds-wc-chat-bubble-group>` — groups consecutive chat bubbles from the same sender.
67
+ *
68
+ * @slot - `<eds-wc-chat-bubble>` elements
69
+ */
70
+ export declare class EdsWcChatBubbleGroup extends LitElement {
71
+ static styles: import("lit").CSSResult;
72
+ connectedCallback(): void;
73
+ protected render(): import("lit-html").TemplateResult<1>;
74
+ }
75
+ declare global {
76
+ interface HTMLElementTagNameMap {
77
+ 'eds-wc-chat-bubble': EdsWcChatBubble;
78
+ 'eds-wc-chat-bubble-content': EdsWcChatBubbleContent;
79
+ 'eds-wc-chat-bubble-reactions': EdsWcChatBubbleReactions;
80
+ 'eds-wc-chat-bubble-group': EdsWcChatBubbleGroup;
81
+ }
82
+ }
83
+ //# sourceMappingURL=eds-wc-chat-bubble.d.ts.map
package/eds-chat-bubble/eds-wc-chat-bubble.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"eds-wc-chat-bubble.d.ts","sourceRoot":"","sources":["../../src/eds-chat-bubble/eds-wc-chat-bubble.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAC5B,SAAS,GACT,WAAW,GACX,OAAO,GACP,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,CAAC;AAEjB,kEAAkE;AAClE,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,eAAgB,SAAQ,cAAc;IACJ,OAAO,EAAE,sBAAsB,CAAe;IAC9C,KAAK,EAAE,oBAAoB,CAAW;IAEjF,OAAgB,MAAM,0BAsDpB;cAEiB,MAAM;CAG5B;AAED;;;;;;;;GAQG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IAClD,2EAA2E;IAC/B,WAAW,UAAS;IAEhE,OAAgB,MAAM,0BAwBpB;IAEO,iBAAiB,IAAI,IAAI;cAOf,MAAM;CAG5B;AAED;;;;GAIG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IACpD,iEAAiE;IACtB,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAY;IAC7E,4DAA4D;IACjB,KAAK,EAAE,OAAO,GAAG,KAAK,CAAS;IAE1E,OAAgB,MAAM,0BAmBpB;cAEiB,MAAM;CAG5B;AAED;;;;GAIG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAOpB;IAEO,iBAAiB,IAAI,IAAI;cAOf,MAAM;CAG5B;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,eAAe,CAAC;QACtC,4BAA4B,EAAE,sBAAsB,CAAC;QACrD,8BAA8B,EAAE,wBAAwB,CAAC;QACzD,0BAA0B,EAAE,oBAAoB,CAAC;KACpD;CACJ"}