@carbon/web-components 2.19.0 → 2.20.0

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 (38) hide show
  1. package/dist/ai-label.min.js +1 -1
  2. package/dist/code-snippet.min.js +1 -1
  3. package/dist/combo-box.min.js +1 -1
  4. package/dist/content-switcher.min.js +1 -1
  5. package/dist/{copy-button-79f26bdb.js → copy-button-019b4375.js} +1 -1
  6. package/dist/copy-button.min.js +1 -1
  7. package/dist/data-table.min.js +1 -1
  8. package/dist/dropdown-item-883bbca6.js +168 -0
  9. package/dist/dropdown.min.js +3 -3
  10. package/dist/{icon-button-34e04d73.js → icon-button-3c7e5c61.js} +2 -2
  11. package/dist/icon-button.min.js +1 -1
  12. package/dist/multi-select.min.js +8 -8
  13. package/dist/overflow-menu.min.js +1 -1
  14. package/dist/{popover-content-00cf67b1.js → popover-content-f8458b22.js} +3 -3
  15. package/dist/popover.min.js +1 -1
  16. package/dist/side-panel.min.js +1 -1
  17. package/dist/slug.min.js +1 -1
  18. package/dist/tag.min.js +6 -6
  19. package/dist/tile.min.js +1 -1
  20. package/dist/toggle-tip.min.js +1 -1
  21. package/dist/{toggletip-5ce7c82e.js → toggletip-2686c94e.js} +4 -4
  22. package/dist/{tooltip-content-d167e372.js → tooltip-content-8c7333b6.js} +5 -5
  23. package/dist/tooltip.min.js +1 -1
  24. package/es/components/ai-label/ai-label.scss.js +1 -1
  25. package/es/components/combo-box/combo-box.scss.js +1 -1
  26. package/es/components/data-table/data-table.scss.js +1 -1
  27. package/es/components/dropdown/dropdown.scss.js +1 -1
  28. package/es/components/icon-button/icon-button.scss.js +1 -1
  29. package/es/components/multi-select/multi-select.scss.js +1 -1
  30. package/es/components/popover/popover.scss.js +1 -1
  31. package/es/components/slug/slug.scss.js +1 -1
  32. package/es/components/tag/tag.scss.js +1 -1
  33. package/es/components/tile/tile.scss.js +1 -1
  34. package/es/components/toggle-tip/toggletip.scss.js +1 -1
  35. package/es/components/tooltip/tooltip.scss.js +1 -1
  36. package/package.json +3 -3
  37. package/scss/components/popover/popover.scss +146 -0
  38. package/dist/dropdown-item-f4b845f3.js +0 -168
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/web-components",
3
3
  "description": "Web components for the Carbon Design System",
4
- "version": "2.19.0",
4
+ "version": "2.20.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "es/index.js",
7
7
  "module": "es/index.js",
@@ -67,7 +67,7 @@
67
67
  "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
68
68
  },
69
69
  "dependencies": {
70
- "@carbon/styles": "^1.71.0",
70
+ "@carbon/styles": "^1.72.0",
71
71
  "@floating-ui/dom": "^1.6.3",
72
72
  "@ibm/telemetry-js": "^1.5.0",
73
73
  "flatpickr": "4.6.13",
@@ -138,5 +138,5 @@
138
138
  }
139
139
  ]
140
140
  },
141
- "gitHead": "4e89908b4bbb6b1c34543cb56f551f242a27d609"
141
+ "gitHead": "97fc2e65d5d78f3bc191f036cb669b072db1d85f"
142
142
  }
package/scss/components/popover/popover.scss CHANGED
@@ -109,6 +109,17 @@ $popover-caret-height: custom-property.get-var(
109
109
  }
110
110
  }
111
111
 
112
+ // rtl
113
+ :host(#{$prefix}-tooltip-content:dir(rtl)[align^='bottom']:not([autoalign])),
114
+ :host(#{$prefix}-popover-content:dir(rtl)[align^='bottom']:not([autoalign])),
115
+ :host(#{$prefix}-toggletip:dir(rtl)[alignment^='bottom']:not([autoalign])),
116
+ :host(#{$prefix}-ai-label:dir(rtl)[alignment^='bottom']:not([autoalign])),
117
+ :host(#{$prefix}-slug:dir(rtl)[alignment^='bottom']:not([autoalign])) {
118
+ .#{$prefix}--popover-caret {
119
+ transform: translate(50%, $popover-offset);
120
+ }
121
+ }
122
+
112
123
  :host(#{$prefix}-ai-label[alignment^='bottom']:not([autoalign]))
113
124
  .#{$prefix}--popover-caret,
114
125
  :host(#{$prefix}-slug[alignment^='bottom']:not([autoalign]))
@@ -128,6 +139,17 @@ $popover-caret-height: custom-property.get-var(
128
139
  }
129
140
  }
130
141
 
142
+ // rtl
143
+ :host(#{$prefix}-tooltip-content:dir(rtl)[align='bottom']:not([autoalign])),
144
+ :host(#{$prefix}-popover-content:dir(rtl)[align='bottom']:not([autoalign])),
145
+ :host(#{$prefix}-toggletip:dir(rtl)[alignment='bottom']:not([autoalign])),
146
+ :host(#{$prefix}-ai-label:dir(rtl)[alignment='bottom']:not([autoalign])),
147
+ :host(#{$prefix}-slug:dir(rtl)[alignment='bottom']:not([autoalign])) {
148
+ .#{$prefix}--popover-content {
149
+ transform: translate(50%, calc(100% + $popover-offset));
150
+ }
151
+ }
152
+
131
153
  :host(#{$prefix}-tooltip-content[align='bottom-left']:not([autoalign])),
132
154
  :host(#{$prefix}-popover-content[align='bottom-left']:not([autoalign])),
133
155
  :host(#{$prefix}-toggletip[alignment='bottom-left']:not([autoalign])),
@@ -143,6 +165,22 @@ $popover-caret-height: custom-property.get-var(
143
165
  }
144
166
  }
145
167
 
168
+ // rtl
169
+ :host(
170
+ #{$prefix}-tooltip-content:dir(rtl)[align='bottom-left']:not([autoalign])
171
+ ),
172
+ :host(
173
+ #{$prefix}-popover-content:dir(rtl)[align='bottom-left']:not([autoalign])
174
+ ),
175
+ :host(#{$prefix}-toggletip:dir(rtl)[alignment='bottom-left']:not([autoalign])),
176
+ :host(#{$prefix}-ai-label:dir(rtl)[alignment='bottom-left']:not([autoalign])),
177
+ :host(#{$prefix}-slug:dir(rtl)[alignment='bottom-left']:not([autoalign])) {
178
+ .#{$prefix}--popover-content {
179
+ inset-inline-end: 0;
180
+ inset-inline-start: initial;
181
+ }
182
+ }
183
+
146
184
  :host(#{$prefix}-tooltip-content[align='bottom-right']:not([autoalign])),
147
185
  :host(#{$prefix}-popover-content[align='bottom-right']:not([autoalign])),
148
186
  :host(#{$prefix}-toggletip[alignment='bottom-right']:not([autoalign])),
@@ -155,6 +193,21 @@ $popover-caret-height: custom-property.get-var(
155
193
  }
156
194
  }
157
195
 
196
+ // rtl
197
+ :host(
198
+ #{$prefix}-tooltip-content:dir(rtl)[align='bottom-right']:not([autoalign])
199
+ ),
200
+ :host(
201
+ #{$prefix}-popover-content:dir(rtl)[align='bottom-right']:not([autoalign])
202
+ ),
203
+ :host(#{$prefix}-toggletip:dir(rtl)[alignment='bottom-right']:not([autoalign])),
204
+ :host(#{$prefix}-ai-label:dir(rtl)[alignment='bottom-right']:not([autoalign])),
205
+ :host(#{$prefix}-slug:dir(rtl)[alignment='bottom-right']:not([autoalign])) {
206
+ .#{$prefix}--popover-content {
207
+ inset-inline-start: 0;
208
+ }
209
+ }
210
+
158
211
  :host(#{$prefix}-tooltip-content[align^='left']:not([autoalign])),
159
212
  :host(#{$prefix}-popover-content[align^='left']:not([autoalign])),
160
213
  :host(#{$prefix}-toggletip[alignment^='left']:not([autoalign])),
@@ -170,6 +223,18 @@ $popover-caret-height: custom-property.get-var(
170
223
  }
171
224
  }
172
225
 
226
+ // rtl
227
+ :host(#{$prefix}-tooltip-content:dir(rtl)[align^='left']:not([autoalign])),
228
+ :host(#{$prefix}-popover-content:dir(rtl)[align^='left']:not([autoalign])),
229
+ :host(#{$prefix}-toggletip:dir(rtl)[alignment^='left']:not([autoalign])),
230
+ :host(#{$prefix}-ai-label:dir(rtl)[alignment^='left']:not([autoalign])),
231
+ :host(#{$prefix}-slug:dir(rtl)[alignment^='left']:not([autoalign])) {
232
+ .#{$prefix}--popover-caret {
233
+ inset-inline-end: initial;
234
+ inset-inline-start: 100%;
235
+ }
236
+ }
237
+
173
238
  :host(#{$prefix}-tooltip-content[align='left']:not([autoalign])),
174
239
  :host(#{$prefix}-popover-content[align='left']:not([autoalign])),
175
240
  :host(#{$prefix}-toggletip[alignment='left']:not([autoalign])),
@@ -218,6 +283,18 @@ $popover-caret-height: custom-property.get-var(
218
283
  }
219
284
  }
220
285
 
286
+ // rtl
287
+ :host(#{$prefix}-tooltip-content:dir(rtl)[align^='left']:not([autoalign])),
288
+ :host(#{$prefix}-popover-content:dir(rtl)[align^='left']:not([autoalign])),
289
+ :host(#{$prefix}-toggletip:dir(rtl)[alignment^='left']:not([autoalign])),
290
+ :host(#{$prefix}-ai-label:dir(rtl)[alignment^='left']:not([autoalign])),
291
+ :host(#{$prefix}-slug:dir(rtl)[alignment^='left']:not([autoalign])) {
292
+ .#{$prefix}--popover-content {
293
+ inset-inline-end: initial;
294
+ inset-inline-start: 100%;
295
+ }
296
+ }
297
+
221
298
  :host(#{$prefix}-tooltip-content[align^='right']:not([autoalign])),
222
299
  :host(#{$prefix}-popover-content[align^='right']:not([autoalign])),
223
300
  :host(#{$prefix}-toggletip[alignment^='right']:not([autoalign])),
@@ -233,6 +310,18 @@ $popover-caret-height: custom-property.get-var(
233
310
  }
234
311
  }
235
312
 
313
+ // rtl
314
+ :host(#{$prefix}-tooltip-content:dir(rtl)[align^='right']:not([autoalign])),
315
+ :host(#{$prefix}-popover-content:dir(rtl)[align^='right']:not([autoalign])),
316
+ :host(#{$prefix}-toggletip:dir(rtl)[alignment^='right']:not([autoalign])),
317
+ :host(#{$prefix}-ai-label:dir(rtl)[alignment^='right']:not([autoalign])),
318
+ :host(#{$prefix}-slug:dir(rtl)[alignment^='right']:not([autoalign])) {
319
+ .#{$prefix}--popover-caret {
320
+ inset-inline-end: 100%;
321
+ inset-inline-start: initial;
322
+ }
323
+ }
324
+
236
325
  :host(#{$prefix}-tooltip-content[align='right']:not([autoalign])),
237
326
  :host(#{$prefix}-popover-content[align='right']:not([autoalign])),
238
327
  :host(#{$prefix}-toggletip[alignment='right']:not([autoalign])),
@@ -274,6 +363,18 @@ $popover-caret-height: custom-property.get-var(
274
363
  }
275
364
  }
276
365
 
366
+ // rtl
367
+ :host(#{$prefix}-tooltip-content:dir(rtl)[align^='right']:not([autoalign])),
368
+ :host(#{$prefix}-popover-content:dir(rtl)[align^='right']:not([autoalign])),
369
+ :host(#{$prefix}-toggletip:dir(rtl)[alignment^='right']:not([autoalign])),
370
+ :host(#{$prefix}-ai-label:dir(rtl)[alignment^='right']:not([autoalign])),
371
+ :host(#{$prefix}-slug:dir(rtl)[alignment^='right']:not([autoalign])) {
372
+ .#{$prefix}--popover-content {
373
+ inset-inline-end: 100%;
374
+ inset-inline-start: initial;
375
+ }
376
+ }
377
+
277
378
  :host(#{$prefix}-tooltip-content[align^='top']:not([autoalign])),
278
379
  :host(#{$prefix}-popover-content[align^='top']:not([autoalign])),
279
380
  :host(#{$prefix}-toggletip[alignment^='top']:not([autoalign])),
@@ -289,6 +390,17 @@ $popover-caret-height: custom-property.get-var(
289
390
  }
290
391
  }
291
392
 
393
+ // rtl
394
+ :host(#{$prefix}-tooltip-content:dir(rtl)[align^='top']:not([autoalign])),
395
+ :host(#{$prefix}-popover-content:dir(rtl)[align^='top']:not([autoalign])),
396
+ :host(#{$prefix}-toggletip:dir(rtl)[alignment^='top']:not([autoalign])),
397
+ :host(#{$prefix}-ai-label:dir(rtl)[alignment^='top']:not([autoalign])),
398
+ :host(#{$prefix}-slug:dir(rtl)[alignment^='top']:not([autoalign])) {
399
+ .#{$prefix}--popover-caret {
400
+ transform: translate(50%, calc(-1 * $popover-offset));
401
+ }
402
+ }
403
+
292
404
  :host(#{$prefix}-tooltip-content[align='top']:not([autoalign])),
293
405
  :host(#{$prefix}-popover-content[align='top']:not([autoalign])),
294
406
  :host(#{$prefix}-toggletip[alignment='top']:not([autoalign])),
@@ -301,6 +413,17 @@ $popover-caret-height: custom-property.get-var(
301
413
  }
302
414
  }
303
415
 
416
+ // rtl
417
+ :host(#{$prefix}-tooltip-content:dir(rtl)[align='top']:not([autoalign])),
418
+ :host(#{$prefix}-popover-content:dir(rtl)[align='top']:not([autoalign])),
419
+ :host(#{$prefix}-toggletip:dir(rtl)[alignment='top']:not([autoalign])),
420
+ :host(#{$prefix}-ai-label:dir(rtl)[alignment='top']:not([autoalign])),
421
+ :host(#{$prefix}-slug[alignment='top']:not([autoalign])) {
422
+ .#{$prefix}--popover-content {
423
+ transform: translate(50%, calc(-100% - $popover-offset));
424
+ }
425
+ }
426
+
304
427
  :host(#{$prefix}-tooltip-content[align='top-left']:not([autoalign])),
305
428
  :host(#{$prefix}-popover-content[align='top-left']:not([autoalign])),
306
429
  :host(#{$prefix}-toggletip[alignment='top-left']:not([autoalign])),
@@ -316,6 +439,18 @@ $popover-caret-height: custom-property.get-var(
316
439
  }
317
440
  }
318
441
 
442
+ // rtl
443
+ :host(#{$prefix}-tooltip-content:dir(rtl)[align='top-left']:not([autoalign])),
444
+ :host(#{$prefix}-popover-content:dir(rtl)[align='top-left']:not([autoalign])),
445
+ :host(#{$prefix}-toggletip:dir(rtl)[alignment='top-left']:not([autoalign])),
446
+ :host(#{$prefix}-ai-label:dir(rtl)[alignment='top-left']:not([autoalign])),
447
+ :host(#{$prefix}-slug[alignment='top-left']:not([autoalign])) {
448
+ .#{$prefix}--popover-content {
449
+ inset-inline-end: 0;
450
+ inset-inline-start: initial;
451
+ }
452
+ }
453
+
319
454
  :host(#{$prefix}-tooltip-content[align='top-right']:not([autoalign])),
320
455
  :host(#{$prefix}-popover-content[align='top-right']:not([autoalign])),
321
456
  :host(#{$prefix}-toggletip[alignment='top-right']:not([autoalign])),
@@ -328,6 +463,17 @@ $popover-caret-height: custom-property.get-var(
328
463
  }
329
464
  }
330
465
 
466
+ // rtl
467
+ :host(#{$prefix}-tooltip-content:dir(rtl)[align='top-right']:not([autoalign])),
468
+ :host(#{$prefix}-popover-content:dir(rtl)[align='top-right']:not([autoalign])),
469
+ :host(#{$prefix}-toggletip:dir(rtl)[alignment='top-right']:not([autoalign])),
470
+ :host(#{$prefix}-ai-label:dir(rtl)[alignment='top-right']:not([autoalign])),
471
+ :host(#{$prefix}-slug[alignment='top-right']:not([autoalign])) {
472
+ .#{$prefix}--popover-content {
473
+ inset-inline-start: 0;
474
+ }
475
+ }
476
+
331
477
  :host(#{$prefix}-toggletip[autoalign]),
332
478
  :host(#{$prefix}-tooltip-content[autoalign]),
333
479
  :host(#{$prefix}-popover-content[autoalign]) {