@nxgt/material 2.8.0 → 2.10.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 (86) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/README.md +2 -2
  3. package/dist/{_Uint8Array-CALbCR7W.js → _Uint8Array-azThpjEP.js} +1 -1
  4. package/dist/{_overRest-BQ8agsDH.js → _overRest-DMn4Dt71.js} +1 -1
  5. package/dist/{async-slice-BHMdvnqm.js → async-slice-DhZDjEtw.js} +2 -2
  6. package/dist/{blockDiagram-BEXU5L5S-D4gI6nqs.js → blockDiagram-BEXU5L5S-B8_AJyBb.js} +2 -2
  7. package/dist/{chunk-3FUC2YCW-BLMCnCFE.js → chunk-3FUC2YCW-AfTluaJD.js} +2 -2
  8. package/dist/{chunk-7M6MHVWA-CUtKEeuL.js → chunk-7M6MHVWA-B2FTOUoo.js} +1 -1
  9. package/dist/{chunk-GNY47TPC-CB_83G7J.js → chunk-GNY47TPC-CscSFMWi.js} +4 -4
  10. package/dist/{chunk-NETBCI7D-Cywmx0rz.js → chunk-NETBCI7D-iu8QN4Le.js} +1 -1
  11. package/dist/{chunk-Z7XXMR3K-Ccb3Rfjl.js → chunk-Z7XXMR3K-BICnZMWs.js} +1 -1
  12. package/dist/{classDiagram-v2-NBCMYWYE-CRgxPgLD.js → classDiagram-v2-NBCMYWYE-Cg2qBPTZ.js} +2 -2
  13. package/dist/{components-Bg1bqGbc.js → components-BfXTx1uS.js} +20734 -20660
  14. package/dist/components.js +5 -5
  15. package/dist/{dagre-6A5THRUB-c8yG3_vh.js → dagre-6A5THRUB-B9m4hqWN.js} +11 -11
  16. package/dist/{diagram-22UHCM2B-C3Xcfy6D.js → diagram-22UHCM2B-ChYYeBFB.js} +2 -2
  17. package/dist/{diagram-3UASUU5V-maEO61Bh.js → diagram-3UASUU5V-BoEmx9Kd.js} +1 -1
  18. package/dist/dnd.js +1 -1
  19. package/dist/{elk-276RUBZZ-BoWoJr6K.js → elk-276RUBZZ-CxNgT7Wb.js} +3 -3
  20. package/dist/{erDiagram-OPXOYQCR-CVvgZCSJ.js → erDiagram-OPXOYQCR-DiqLuL4t.js} +2 -2
  21. package/dist/{field-blur-Bwa48QBk.js → field-blur--x_n3oMy.js} +1 -1
  22. package/dist/{flowDiagram-KWPJA3E3-RdU0csul.js → flowDiagram-KWPJA3E3-CcUm8XN5.js} +3 -3
  23. package/dist/{ganttDiagram-FUAMR5RP-DPLDPJtJ.js → ganttDiagram-FUAMR5RP-fN1MVB5K.js} +1 -1
  24. package/dist/{graphlib-DHgEBs83.js → graphlib-DLjE3QPd.js} +6 -6
  25. package/dist/hooks.js +2 -2
  26. package/dist/{i18n-provider-CA8YAlje.js → i18n-provider-CQL7fqLy.js} +1 -1
  27. package/dist/i18n.js +6 -6
  28. package/dist/{isArrayLikeObject-BSfDsA7T.js → isArrayLikeObject-CO-5KAzG.js} +3 -3
  29. package/dist/{isEmpty-BEe-nNXw.js → isEmpty-Bl1drJE7.js} +3 -3
  30. package/dist/{journeyDiagram-ZHPQQLJL-CTGnr-JY.js → journeyDiagram-ZHPQQLJL-Cj7Vcat2.js} +1 -1
  31. package/dist/lib/components/ui/feedback/toast/index.d.ts +1 -0
  32. package/dist/lib/components/ui/feedback/toast/partials/toast-actions.d.ts +12 -2
  33. package/dist/lib/components/ui/feedback/toast/toast-data.d.ts +26 -0
  34. package/dist/lib/components/ui/feedback/toast/toast.d.ts +6 -3
  35. package/dist/lib/components/ui/feedback/toast/toasts.d.ts +18 -6
  36. package/dist/lib/components/ui/primitives/tabs/partials/tabs-content.d.ts +3 -0
  37. package/dist/lib/components/ui/primitives/tabs/partials/tabs-indicator.d.ts +13 -0
  38. package/dist/lib/components/ui/primitives/tabs/partials/tabs-list.d.ts +3 -0
  39. package/dist/lib/components/ui/primitives/tabs/partials/tabs-trigger.d.ts +6 -0
  40. package/dist/lib/components/ui/primitives/tabs/tabs-classes.d.ts +27 -0
  41. package/dist/lib/components/ui/primitives/tabs/tabs-variant.d.ts +5 -0
  42. package/dist/lib/components/ui/primitives/tabs/tabs.d.ts +11 -7
  43. package/dist/lib/components/ui/widgets/emoji/types.d.ts +1 -6
  44. package/dist/lib/i18n/resources/en/en.d.ts +14 -0
  45. package/dist/lib/i18n/resources/en/material.json.d.ts +15 -1
  46. package/dist/lib/i18n/resources/fr/fr.d.ts +14 -0
  47. package/dist/lib/i18n/resources/fr/material.json.d.ts +15 -1
  48. package/dist/lib/i18n/resources/resources.d.ts +28 -0
  49. package/dist/lib/i18n/translator.d.ts +1 -1
  50. package/dist/lib.js +3 -3
  51. package/dist/main.js +11 -11
  52. package/dist/map.js +2 -2
  53. package/dist/material.css +1 -1
  54. package/dist/{merge-CRXQ4NSv.js → merge-CwwtONfp.js} +4 -4
  55. package/dist/{mermaid.core-C_JPRVNa.js → mermaid.core-Be3u4qna.js} +21 -21
  56. package/dist/{mindmap-definition-NLK3R4M7-OTZIWZah.js → mindmap-definition-NLK3R4M7-Dw8Z4Lyy.js} +2 -2
  57. package/dist/{pieDiagram-5QR66LMP-BpmwlCYh.js → pieDiagram-5QR66LMP-Cv_V3nnp.js} +1 -1
  58. package/dist/print.js +2 -2
  59. package/dist/{quadrantDiagram-O4NWA36T-CIFt4MgA.js → quadrantDiagram-O4NWA36T-Bavlu0dy.js} +1 -1
  60. package/dist/{requirementDiagram-PLB6GJNP-BJaiDsKj.js → requirementDiagram-PLB6GJNP-6fInAtPO.js} +2 -2
  61. package/dist/{sankeyDiagram-IPEJSGJF-XDAIB5as.js → sankeyDiagram-IPEJSGJF-wzaUoPP7.js} +1 -1
  62. package/dist/{sortable-provider-MCgOzfRp.js → sortable-provider-WZT5I34N.js} +1 -1
  63. package/dist/{stateDiagram-v2-GCMORJYK-CGo16q99.js → stateDiagram-v2-GCMORJYK-BRIjnDU3.js} +2 -2
  64. package/dist/{stored-language-Cz89IYZX.js → stored-language-BW32owje.js} +30 -2
  65. package/dist/{swimlanes-2SLR337P-DXZt0zyd.js → swimlanes-2SLR337P-BNephno6.js} +3 -3
  66. package/dist/{swimlanesDiagram-TC7HE7FX-Cno6MSMH.js → swimlanesDiagram-TC7HE7FX-CUARDUGc.js} +3 -3
  67. package/dist/{timeline-definition-EJHVYXUP-CbPIZcT7.js → timeline-definition-EJHVYXUP-By2gWxfd.js} +1 -1
  68. package/dist/{translate-material-Caxsy0bp.js → translate-material-ZEzF-LKH.js} +2 -2
  69. package/dist/{translator-B85Q_O55.js → translator-BfqVlNGW.js} +1 -1
  70. package/dist/{use-heading-spy-C4yWEr5c.js → use-heading-spy-DvZVu15k.js} +2 -2
  71. package/dist/{use-material-translation-Cm3Ej3bT.js → use-material-translation-B2GUtxUY.js} +2 -2
  72. package/dist/{usecaseDiagram-POWQR4AR-D_gyFA3m.js → usecaseDiagram-POWQR4AR-CleiKWa8.js} +2 -2
  73. package/dist/{xychartDiagram-PMCCYNJV-W-fXV6iN.js → xychartDiagram-PMCCYNJV-gwrRH4uJ.js} +1 -1
  74. package/docs/components/data-display.md +1 -1
  75. package/docs/components/feedback-and-status.md +35 -6
  76. package/docs/components/primitives.md +80 -5
  77. package/docs/components/rich-widgets.md +10 -0
  78. package/docs/guides/i18n.md +19 -2
  79. package/docs/guides/theming.md +17 -3
  80. package/docs/previews/data-display-codegroup.webp +0 -0
  81. package/docs/previews/primitives-tabs.webp +0 -0
  82. package/docs/previews/rich-widgets-emojipicker.webp +0 -0
  83. package/docs/roadmap.md +12 -0
  84. package/docs/troubleshooting.md +82 -0
  85. package/package.json +2 -2
  86. package/dist/lib/components/ui/widgets/emoji/emoji.groups.d.ts +0 -6
@@ -1,7 +1,7 @@
1
- import { S as e, _ as t, g as n, p as r, v as i, w as a, x as o } from "./translator-B85Q_O55.js";
2
- import { n as s, r as c } from "./_overRest-BQ8agsDH.js";
3
- import { a as l, c as u, d, i as f, l as p, n as m, p as h, r as g, t as _, u as v } from "./_Uint8Array-CALbCR7W.js";
4
- import { n as y, r as b, t as x } from "./isArrayLikeObject-BSfDsA7T.js";
1
+ import { S as e, _ as t, g as n, p as r, v as i, w as a, x as o } from "./translator-BfqVlNGW.js";
2
+ import { n as s, r as c } from "./_overRest-DMn4Dt71.js";
3
+ import { a as l, c as u, d, i as f, l as p, n as m, p as h, r as g, t as _, u as v } from "./_Uint8Array-azThpjEP.js";
4
+ import { n as y, r as b, t as x } from "./isArrayLikeObject-CO-5KAzG.js";
5
5
  //#region ../../node_modules/lodash-es/_baseCreate.js
6
6
  var S = Object.create, C = function() {
7
7
  function e() {}
@@ -8,9 +8,9 @@ import { a as he } from "./chunk-MBY4JIJT-BFIqOe-8.js";
8
8
  import "./chunk-7PRAP22T-0C6_H8Li.js";
9
9
  import "./chunk-7INBJB4K-k-I67NSP.js";
10
10
  import "./chunk-5DYCD2WN-Cd1zazNp.js";
11
- import "./chunk-Z7XXMR3K-Ccb3Rfjl.js";
11
+ import "./chunk-Z7XXMR3K-BICnZMWs.js";
12
12
  import "./chunk-UA2S7LBM-ChuksCDg.js";
13
- import { n as ge } from "./chunk-GNY47TPC-CB_83G7J.js";
13
+ import { n as ge } from "./chunk-GNY47TPC-CscSFMWi.js";
14
14
  import { n as _e, t as ve } from "./chunk-LNGE3PJU-DJjGTS7O.js";
15
15
  //#region ../../node_modules/es-toolkit/dist/compat/_internal/isPrototype.mjs
16
16
  function ye(e) {
@@ -302,7 +302,7 @@ var qe = "c4", Je = {
302
302
  id: Ye,
303
303
  detector: /* @__PURE__ */ p((e) => /^\s*(graph|flowchart)/.test(e), "detector"),
304
304
  loader: /* @__PURE__ */ p(async () => {
305
- let { diagram: e } = await import("./flowDiagram-KWPJA3E3-RdU0csul.js");
305
+ let { diagram: e } = await import("./flowDiagram-KWPJA3E3-CcUm8XN5.js");
306
306
  return {
307
307
  id: Ye,
308
308
  diagram: e
@@ -312,7 +312,7 @@ var qe = "c4", Je = {
312
312
  id: Ze,
313
313
  detector: /* @__PURE__ */ p((e) => /^\s*agentflow-beta\b/.test(e), "detector"),
314
314
  loader: /* @__PURE__ */ p(async () => {
315
- let { diagram: e } = await import("./diagram-22UHCM2B-C3Xcfy6D.js");
315
+ let { diagram: e } = await import("./diagram-22UHCM2B-ChYYeBFB.js");
316
316
  return {
317
317
  id: Ze,
318
318
  diagram: e
@@ -322,7 +322,7 @@ var qe = "c4", Je = {
322
322
  id: $e,
323
323
  detector: /* @__PURE__ */ p((e) => /^\s*swimlane-beta\b/.test(e), "detector"),
324
324
  loader: /* @__PURE__ */ p(async () => {
325
- let { diagram: e } = await import("./swimlanesDiagram-TC7HE7FX-Cno6MSMH.js");
325
+ let { diagram: e } = await import("./swimlanesDiagram-TC7HE7FX-CUARDUGc.js");
326
326
  return {
327
327
  id: $e,
328
328
  diagram: e
@@ -332,7 +332,7 @@ var qe = "c4", Je = {
332
332
  id: tt,
333
333
  detector: /* @__PURE__ */ p((e) => /^\s*erDiagram/.test(e), "detector"),
334
334
  loader: /* @__PURE__ */ p(async () => {
335
- let { diagram: e } = await import("./erDiagram-OPXOYQCR-CVvgZCSJ.js");
335
+ let { diagram: e } = await import("./erDiagram-OPXOYQCR-DiqLuL4t.js");
336
336
  return {
337
337
  id: tt,
338
338
  diagram: e
@@ -352,7 +352,7 @@ var qe = "c4", Je = {
352
352
  id: at,
353
353
  detector: /* @__PURE__ */ p((e) => /^\s*gantt/.test(e), "detector"),
354
354
  loader: /* @__PURE__ */ p(async () => {
355
- let { diagram: e } = await import("./ganttDiagram-FUAMR5RP-DPLDPJtJ.js");
355
+ let { diagram: e } = await import("./ganttDiagram-FUAMR5RP-fN1MVB5K.js");
356
356
  return {
357
357
  id: at,
358
358
  diagram: e
@@ -372,7 +372,7 @@ var qe = "c4", Je = {
372
372
  id: lt,
373
373
  detector: /* @__PURE__ */ p((e) => /^\s*pie/.test(e), "detector"),
374
374
  loader: /* @__PURE__ */ p(async () => {
375
- let { diagram: e } = await import("./pieDiagram-5QR66LMP-BpmwlCYh.js");
375
+ let { diagram: e } = await import("./pieDiagram-5QR66LMP-Cv_V3nnp.js");
376
376
  return {
377
377
  id: lt,
378
378
  diagram: e
@@ -382,7 +382,7 @@ var qe = "c4", Je = {
382
382
  id: dt,
383
383
  detector: /* @__PURE__ */ p((e) => /^\s*quadrantChart/.test(e), "detector"),
384
384
  loader: /* @__PURE__ */ p(async () => {
385
- let { diagram: e } = await import("./quadrantDiagram-O4NWA36T-CIFt4MgA.js");
385
+ let { diagram: e } = await import("./quadrantDiagram-O4NWA36T-Bavlu0dy.js");
386
386
  return {
387
387
  id: dt,
388
388
  diagram: e
@@ -392,7 +392,7 @@ var qe = "c4", Je = {
392
392
  id: pt,
393
393
  detector: /* @__PURE__ */ p((e) => /^\s*xychart(-beta)?/.test(e), "detector"),
394
394
  loader: /* @__PURE__ */ p(async () => {
395
- let { diagram: e } = await import("./xychartDiagram-PMCCYNJV-W-fXV6iN.js");
395
+ let { diagram: e } = await import("./xychartDiagram-PMCCYNJV-gwrRH4uJ.js");
396
396
  return {
397
397
  id: pt,
398
398
  diagram: e
@@ -402,7 +402,7 @@ var qe = "c4", Je = {
402
402
  id: ht,
403
403
  detector: /* @__PURE__ */ p((e) => /^\s*requirement(Diagram)?/.test(e), "detector"),
404
404
  loader: /* @__PURE__ */ p(async () => {
405
- let { diagram: e } = await import("./requirementDiagram-PLB6GJNP-BJaiDsKj.js");
405
+ let { diagram: e } = await import("./requirementDiagram-PLB6GJNP-6fInAtPO.js");
406
406
  return {
407
407
  id: ht,
408
408
  diagram: e
@@ -422,7 +422,7 @@ var qe = "c4", Je = {
422
422
  id: yt,
423
423
  detector: /* @__PURE__ */ p((e) => /^\s*classDiagram/.test(e), "detector"),
424
424
  loader: /* @__PURE__ */ p(async () => {
425
- let { diagram: e } = await import("./classDiagram-v2-NBCMYWYE-CRgxPgLD.js");
425
+ let { diagram: e } = await import("./classDiagram-v2-NBCMYWYE-Cg2qBPTZ.js");
426
426
  return {
427
427
  id: yt,
428
428
  diagram: e
@@ -432,7 +432,7 @@ var qe = "c4", Je = {
432
432
  id: xt,
433
433
  detector: /* @__PURE__ */ p((e) => /^\s*stateDiagram/.test(e), "detector"),
434
434
  loader: /* @__PURE__ */ p(async () => {
435
- let { diagram: e } = await import("./stateDiagram-v2-GCMORJYK-CGo16q99.js");
435
+ let { diagram: e } = await import("./stateDiagram-v2-GCMORJYK-BRIjnDU3.js");
436
436
  return {
437
437
  id: xt,
438
438
  diagram: e
@@ -442,7 +442,7 @@ var qe = "c4", Je = {
442
442
  id: Ct,
443
443
  detector: /* @__PURE__ */ p((e) => /^\s*journey/.test(e), "detector"),
444
444
  loader: /* @__PURE__ */ p(async () => {
445
- let { diagram: e } = await import("./journeyDiagram-ZHPQQLJL-CTGnr-JY.js");
445
+ let { diagram: e } = await import("./journeyDiagram-ZHPQQLJL-Cj7Vcat2.js");
446
446
  return {
447
447
  id: Ct,
448
448
  diagram: e
@@ -460,7 +460,7 @@ var qe = "c4", Je = {
460
460
  id: Ot,
461
461
  detector: /* @__PURE__ */ p((e, t = {}) => /^\s*flowchart-elk/.test(e) ? (t.layout = "elk", !0) : !1, "detector"),
462
462
  loader: /* @__PURE__ */ p(async () => {
463
- let { diagram: e } = await import("./flowDiagram-KWPJA3E3-RdU0csul.js");
463
+ let { diagram: e } = await import("./flowDiagram-KWPJA3E3-CcUm8XN5.js");
464
464
  return {
465
465
  id: Ot,
466
466
  diagram: e
@@ -470,7 +470,7 @@ var qe = "c4", Je = {
470
470
  id: At,
471
471
  detector: /* @__PURE__ */ p((e) => /^\s*timeline/.test(e), "detector"),
472
472
  loader: /* @__PURE__ */ p(async () => {
473
- let { diagram: e } = await import("./timeline-definition-EJHVYXUP-CbPIZcT7.js");
473
+ let { diagram: e } = await import("./timeline-definition-EJHVYXUP-By2gWxfd.js");
474
474
  return {
475
475
  id: At,
476
476
  diagram: e
@@ -480,7 +480,7 @@ var qe = "c4", Je = {
480
480
  id: Mt,
481
481
  detector: /* @__PURE__ */ p((e) => /^\s*mindmap/.test(e), "detector"),
482
482
  loader: /* @__PURE__ */ p(async () => {
483
- let { diagram: e } = await import("./mindmap-definition-NLK3R4M7-OTZIWZah.js");
483
+ let { diagram: e } = await import("./mindmap-definition-NLK3R4M7-Dw8Z4Lyy.js");
484
484
  return {
485
485
  id: Mt,
486
486
  diagram: e
@@ -500,7 +500,7 @@ var qe = "c4", Je = {
500
500
  id: It,
501
501
  detector: /* @__PURE__ */ p((e) => /^\s*sankey(-beta)?/.test(e), "detector"),
502
502
  loader: /* @__PURE__ */ p(async () => {
503
- let { diagram: e } = await import("./sankeyDiagram-IPEJSGJF-XDAIB5as.js");
503
+ let { diagram: e } = await import("./sankeyDiagram-IPEJSGJF-wzaUoPP7.js");
504
504
  return {
505
505
  id: It,
506
506
  diagram: e
@@ -530,7 +530,7 @@ var qe = "c4", Je = {
530
530
  id: Ht,
531
531
  detector: /* @__PURE__ */ p((e) => /^\s*block(-beta)?/.test(e), "detector"),
532
532
  loader: /* @__PURE__ */ p(async () => {
533
- let { diagram: e } = await import("./blockDiagram-BEXU5L5S-D4gI6nqs.js");
533
+ let { diagram: e } = await import("./blockDiagram-BEXU5L5S-B8_AJyBb.js");
534
534
  return {
535
535
  id: Ht,
536
536
  diagram: e
@@ -590,7 +590,7 @@ var qe = "c4", Je = {
590
590
  id: en,
591
591
  detector: /* @__PURE__ */ p((e) => /^\s*treemap/.test(e), "detector"),
592
592
  loader: /* @__PURE__ */ p(async () => {
593
- let { diagram: e } = await import("./diagram-3UASUU5V-maEO61Bh.js");
593
+ let { diagram: e } = await import("./diagram-3UASUU5V-BoEmx9Kd.js");
594
594
  return {
595
595
  id: en,
596
596
  diagram: e
@@ -600,7 +600,7 @@ var qe = "c4", Je = {
600
600
  id: nn,
601
601
  detector: /* @__PURE__ */ p((e) => /^\s*usecase-beta(?:\s|$)/.test(e), "detector"),
602
602
  loader: /* @__PURE__ */ p(async () => {
603
- let { diagram: e } = await import("./usecaseDiagram-POWQR4AR-D_gyFA3m.js");
603
+ let { diagram: e } = await import("./usecaseDiagram-POWQR4AR-CleiKWa8.js");
604
604
  return {
605
605
  id: nn,
606
606
  diagram: e
@@ -7,11 +7,11 @@ import "./chunk-MBY4JIJT-BFIqOe-8.js";
7
7
  import "./chunk-7PRAP22T-0C6_H8Li.js";
8
8
  import "./chunk-7INBJB4K-k-I67NSP.js";
9
9
  import "./chunk-5DYCD2WN-Cd1zazNp.js";
10
- import "./chunk-Z7XXMR3K-Ccb3Rfjl.js";
10
+ import "./chunk-Z7XXMR3K-BICnZMWs.js";
11
11
  import { t as u } from "./chunk-XXDRQBXY-dKXxu_aj.js";
12
12
  import { t as d } from "./chunk-WEXAMYUT-CbFOhEve.js";
13
13
  import "./chunk-UA2S7LBM-ChuksCDg.js";
14
- import { r as f, t as p } from "./chunk-GNY47TPC-CB_83G7J.js";
14
+ import { r as f, t as p } from "./chunk-GNY47TPC-CscSFMWi.js";
15
15
  //#region ../../node_modules/uuid/dist/stringify.js
16
16
  var m = [];
17
17
  for (let e = 0; e < 256; ++e) m.push((e + 256).toString(16).slice(1));
@@ -1,4 +1,4 @@
1
- import { ct as e, ot as t } from "./components-Bg1bqGbc.js";
1
+ import { ct as e, ot as t } from "./components-BfXTx1uS.js";
2
2
  import { n } from "./src-CsLQInsN.js";
3
3
  import { i as r, p as i } from "./chunk-ZIGJFQKS-9VXArDKF.js";
4
4
  import { t as a } from "./ordinal-DwxdXP1t.js";
package/dist/print.js CHANGED
@@ -1,5 +1,5 @@
1
- import { r as e } from "./i18n-provider-CA8YAlje.js";
2
- import { t } from "./translate-material-Caxsy0bp.js";
1
+ import { r as e } from "./i18n-provider-CQL7fqLy.js";
2
+ import { t } from "./translate-material-ZEzF-LKH.js";
3
3
  import { jsx as n, jsxs as r } from "react/jsx-runtime";
4
4
  import { Children as i, createContext as a, isValidElement as o, useCallback as s, useContext as c, useEffect as l, useMemo as u, useState as d } from "react";
5
5
  import { OBJECT_URL_TTL_MS as f, downloadPdfFile as p } from "@nxgt/material-core/pdf-download";
@@ -1,4 +1,4 @@
1
- import { rt as e } from "./components-Bg1bqGbc.js";
1
+ import { rt as e } from "./components-BfXTx1uS.js";
2
2
  import { n as t, t as n } from "./src-CsLQInsN.js";
3
3
  import { n as r } from "./chunk-Y2CYZVJY-BAad7w_K.js";
4
4
  import { D as i, H as a, U as o, a as s, c, f as l, q as u, v as d, w as f, x as p, y as m, z as h } from "./chunk-O7XYJQB3-BChweQ_V.js";
@@ -8,11 +8,11 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
8
8
  import { a as p, i as m, o as h, r as g } from "./chunk-J5ZVWO5B-DmRRmhon.js";
9
9
  import "./chunk-7INBJB4K-k-I67NSP.js";
10
10
  import "./chunk-5DYCD2WN-Cd1zazNp.js";
11
- import "./chunk-Z7XXMR3K-Ccb3Rfjl.js";
11
+ import "./chunk-Z7XXMR3K-BICnZMWs.js";
12
12
  import { t as _ } from "./chunk-XXDRQBXY-dKXxu_aj.js";
13
13
  import { t as v } from "./chunk-WEXAMYUT-CbFOhEve.js";
14
14
  import "./chunk-UA2S7LBM-ChuksCDg.js";
15
- import { r as y, t as b } from "./chunk-GNY47TPC-CB_83G7J.js";
15
+ import { r as y, t as b } from "./chunk-GNY47TPC-CscSFMWi.js";
16
16
  //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/requirementDiagram-PLB6GJNP.mjs
17
17
  var x = (function() {
18
18
  var e = /* @__PURE__ */ n(function(e, t, n, r) {
@@ -1,4 +1,4 @@
1
- import { V as e } from "./components-Bg1bqGbc.js";
1
+ import { V as e } from "./components-BfXTx1uS.js";
2
2
  import { t } from "./src-CsLQInsN.js";
3
3
  import { t as n } from "./ordinal-DwxdXP1t.js";
4
4
  import { n as r } from "./chunk-Y2CYZVJY-BAad7w_K.js";
@@ -1,6 +1,6 @@
1
1
  import { t as e } from "./utils-DC8bw9A_.js";
2
2
  import { pt as t, t as n } from "./icon-button-G9zdQ3Ix.js";
3
- import { t as r } from "./use-material-translation-Cm3Ej3bT.js";
3
+ import { t as r } from "./use-material-translation-B2GUtxUY.js";
4
4
  import { GripVertical as i } from "lucide-react";
5
5
  import { jsx as a } from "react/jsx-runtime";
6
6
  import o, { cloneElement as s, createContext as c, forwardRef as l, memo as u, useCallback as d, useContext as f, useEffect as p, useLayoutEffect as m, useMemo as h, useReducer as g, useRef as _, useState as v } from "react";
@@ -8,12 +8,12 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
8
8
  import { a as h, i as g, o as _, r as v } from "./chunk-J5ZVWO5B-DmRRmhon.js";
9
9
  import "./chunk-7INBJB4K-k-I67NSP.js";
10
10
  import "./chunk-5DYCD2WN-Cd1zazNp.js";
11
- import "./chunk-Z7XXMR3K-Ccb3Rfjl.js";
11
+ import "./chunk-Z7XXMR3K-BICnZMWs.js";
12
12
  import { t as y } from "./chunk-GWA4HPMP-B8jXI0Tl.js";
13
13
  import { t as b } from "./chunk-XXDRQBXY-dKXxu_aj.js";
14
14
  import { t as x } from "./chunk-WEXAMYUT-CbFOhEve.js";
15
15
  import "./chunk-UA2S7LBM-ChuksCDg.js";
16
- import { r as S, t as C } from "./chunk-GNY47TPC-CB_83G7J.js";
16
+ import { r as S, t as C } from "./chunk-GNY47TPC-CscSFMWi.js";
17
17
  //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/stateDiagram-v2-GCMORJYK.mjs
18
18
  var w = (function() {
19
19
  var e = /* @__PURE__ */ i(function(e, t, n, r) {
@@ -50,7 +50,21 @@ var e = {
50
50
  picker: "Emoji",
51
51
  pick: "Choose an emoji",
52
52
  search: "Search emoji",
53
- empty: "No emoji match"
53
+ empty: "No emoji match",
54
+ groups: {
55
+ all: "All",
56
+ recent: "Recent",
57
+ general: "General",
58
+ people_body: "People & body",
59
+ components: "Components",
60
+ animals_nature: "Animals & nature",
61
+ food_drink: "Food & drink",
62
+ travel_places: "Travel & places",
63
+ activities: "Activities",
64
+ objects: "Objects",
65
+ symbols: "Symbols",
66
+ flags: "Flags"
67
+ }
54
68
  },
55
69
  mentions: { empty: "No matches" },
56
70
  cards: {
@@ -1243,7 +1257,21 @@ var e = {
1243
1257
  picker: "Emoji",
1244
1258
  pick: "Choisir un emoji",
1245
1259
  search: "Chercher un emoji",
1246
- empty: "Aucun emoji"
1260
+ empty: "Aucun emoji",
1261
+ groups: {
1262
+ all: "Tous",
1263
+ recent: "Récents",
1264
+ general: "Général",
1265
+ people_body: "Personnes et corps",
1266
+ components: "Composants",
1267
+ animals_nature: "Animaux et nature",
1268
+ food_drink: "Nourriture et boissons",
1269
+ travel_places: "Voyages et lieux",
1270
+ activities: "Activités",
1271
+ objects: "Objets",
1272
+ symbols: "Symboles",
1273
+ flags: "Drapeaux"
1274
+ }
1247
1275
  },
1248
1276
  mentions: { empty: "Aucun résultat" },
1249
1277
  cards: {
@@ -7,10 +7,10 @@ import "./chunk-MBY4JIJT-BFIqOe-8.js";
7
7
  import "./chunk-7PRAP22T-0C6_H8Li.js";
8
8
  import "./chunk-7INBJB4K-k-I67NSP.js";
9
9
  import "./chunk-5DYCD2WN-Cd1zazNp.js";
10
- import "./chunk-Z7XXMR3K-Ccb3Rfjl.js";
10
+ import "./chunk-Z7XXMR3K-BICnZMWs.js";
11
11
  import "./chunk-UA2S7LBM-ChuksCDg.js";
12
- import { r as n } from "./chunk-3FUC2YCW-BLMCnCFE.js";
13
- import { t as r } from "./chunk-NETBCI7D-Cywmx0rz.js";
12
+ import { r as n } from "./chunk-3FUC2YCW-AfTluaJD.js";
13
+ import { t as r } from "./chunk-NETBCI7D-iu8QN4Le.js";
14
14
  //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/swimlanes-2SLR337P.mjs
15
15
  function i(e, { measure: t }) {
16
16
  let n = e.config?.swimlane?.lineHops;
@@ -7,14 +7,14 @@ import "./chunk-MBY4JIJT-BFIqOe-8.js";
7
7
  import "./chunk-7PRAP22T-0C6_H8Li.js";
8
8
  import "./chunk-7INBJB4K-k-I67NSP.js";
9
9
  import "./chunk-5DYCD2WN-Cd1zazNp.js";
10
- import "./chunk-Z7XXMR3K-Ccb3Rfjl.js";
10
+ import "./chunk-Z7XXMR3K-BICnZMWs.js";
11
11
  import "./chunk-GWA4HPMP-B8jXI0Tl.js";
12
12
  import "./chunk-XXDRQBXY-dKXxu_aj.js";
13
13
  import "./chunk-WEXAMYUT-CbFOhEve.js";
14
14
  import "./chunk-UA2S7LBM-ChuksCDg.js";
15
- import "./chunk-GNY47TPC-CB_83G7J.js";
15
+ import "./chunk-GNY47TPC-CscSFMWi.js";
16
16
  import "./chunk-LNGE3PJU-DJjGTS7O.js";
17
- import { r as t, t as n } from "./chunk-7M6MHVWA-CUtKEeuL.js";
17
+ import { r as t, t as n } from "./chunk-7M6MHVWA-B2FTOUoo.js";
18
18
  //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/swimlanesDiagram-TC7HE7FX.mjs
19
19
  var r = n({ styles: /* @__PURE__ */ e((e) => `${t(e)}
20
20
  .swimlane.cluster:not([data-color-id]) rect {
@@ -1,4 +1,4 @@
1
- import { ct as e } from "./components-Bg1bqGbc.js";
1
+ import { ct as e } from "./components-BfXTx1uS.js";
2
2
  import { n as t, t as n } from "./src-CsLQInsN.js";
3
3
  import { p as r } from "./chunk-ZIGJFQKS-9VXArDKF.js";
4
4
  import { n as i, t as a } from "./chunk-Y2CYZVJY-BAad7w_K.js";
@@ -1,5 +1,5 @@
1
- import "./stored-language-Cz89IYZX.js";
2
- import { E as e, r as t } from "./translator-B85Q_O55.js";
1
+ import "./stored-language-BW32owje.js";
2
+ import { E as e, r as t } from "./translator-BfqVlNGW.js";
3
3
  //#region lib/i18n/translate-material.ts
4
4
  function n(n, r, i, a) {
5
5
  if (n) for (let e of /* @__PURE__ */ new Set([n, n.split("-")[0]])) {
@@ -1,4 +1,4 @@
1
- import { a as e, i as t, o as n, t as r } from "./stored-language-Cz89IYZX.js";
1
+ import { a as e, i as t, o as n, t as r } from "./stored-language-BW32owje.js";
2
2
  //#region ../../node_modules/@formatjs/fast-memoize/index.js
3
3
  function i(e, t) {
4
4
  let n = t && t.cache ? t.cache : ne, r = t && t.serializer ? t.serializer : ee;
@@ -1,5 +1,5 @@
1
- import { n as e } from "./stored-language-Cz89IYZX.js";
2
- import { r as t } from "./i18n-provider-CA8YAlje.js";
1
+ import { n as e } from "./stored-language-BW32owje.js";
2
+ import { r as t } from "./i18n-provider-CQL7fqLy.js";
3
3
  import { _ as n, g as r, h as i, n as a, v as o, y as s } from "./number.utils-BiBN2hWJ.js";
4
4
  import { useCallback as c, useEffect as l, useMemo as u, useSyncExternalStore as d } from "react";
5
5
  //#region lib/hooks/resolve-theme.ts
@@ -1,5 +1,5 @@
1
- import { r as e } from "./i18n-provider-CA8YAlje.js";
2
- import { t } from "./translate-material-Caxsy0bp.js";
1
+ import { r as e } from "./i18n-provider-CQL7fqLy.js";
2
+ import { t } from "./translate-material-ZEzF-LKH.js";
3
3
  import { useCallback as n } from "react";
4
4
  //#region lib/i18n/use-material-translation.ts
5
5
  function r() {
@@ -8,11 +8,11 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
8
8
  import { a as g, i as _, o as v, r as y } from "./chunk-J5ZVWO5B-DmRRmhon.js";
9
9
  import "./chunk-7INBJB4K-k-I67NSP.js";
10
10
  import "./chunk-5DYCD2WN-Cd1zazNp.js";
11
- import "./chunk-Z7XXMR3K-Ccb3Rfjl.js";
11
+ import "./chunk-Z7XXMR3K-BICnZMWs.js";
12
12
  import { t as ee } from "./chunk-XXDRQBXY-dKXxu_aj.js";
13
13
  import { t as te } from "./chunk-WEXAMYUT-CbFOhEve.js";
14
14
  import "./chunk-UA2S7LBM-ChuksCDg.js";
15
- import { r as ne, t as re } from "./chunk-GNY47TPC-CB_83G7J.js";
15
+ import { r as ne, t as re } from "./chunk-GNY47TPC-CscSFMWi.js";
16
16
  //#region ../../node_modules/chevrotain/node_modules/lodash-es/_freeGlobal.js
17
17
  var ie = typeof global == "object" && global && global.Object === Object && global, ae = typeof self == "object" && self && self.Object === Object && self, b = ie || ae || Function("return this")(), oe = b.Symbol, se = Object.prototype, ce = se.hasOwnProperty, le = se.toString, ue = oe ? oe.toStringTag : void 0;
18
18
  function de(e) {
@@ -1,4 +1,4 @@
1
- import { at as e, rt as t, st as n } from "./components-Bg1bqGbc.js";
1
+ import { at as e, rt as t, st as n } from "./components-BfXTx1uS.js";
2
2
  import { n as r } from "./src-CsLQInsN.js";
3
3
  import { i } from "./chunk-ZIGJFQKS-9VXArDKF.js";
4
4
  import { n as a } from "./chunk-Y2CYZVJY-BAad7w_K.js";
@@ -479,7 +479,7 @@ import { EventChip } from '@nxgt/material/components';
479
479
 
480
480
  ![CodeBlock](../previews/data-display-codeblock.webp)
481
481
 
482
- Highlighted code with line numbers and copy, a Monaco diff, a collapsible JSON tree, and tabbed samples (`Tabs variant="line"`).
482
+ Highlighted code with line numbers and copy, a Monaco diff, a collapsible JSON tree, and tabbed samples (`Tabs`, underlined).
483
483
 
484
484
  <img src="../previews/data-display-codegroup.webp" height="96" alt="CodeGroup">
485
485
  <img src="../previews/data-display-jsonviewer.webp" height="96" alt="JsonViewer">
@@ -426,7 +426,7 @@ toasts.dismiss(id);
426
426
  | --- | --- | --- | --- |
427
427
  | `title` / `description` | `ReactNode` | preset title for `success`, `error`, `loading` | toast text |
428
428
  | `icon` | `ReactNode` (`toast`) · icon name (`toasts.custom`) | preset icon | leading icon |
429
- | `action` | `ToastAction`: `{ label, onClick? }` or `(dismiss) => ReactNode` | a translated “Close” for `success`, `info`, `error`; a preset keeps the caller's own | trailing button: `onClick`, then the toast closes; or what the function renders, given `dismiss`. Brings the X button and a persistent toast, see below |
429
+ | `action` | `ToastAction`: `{ label, onClick? }` or `(dismiss) => ReactNode` | a translated “Close” for `success`, `info`, `error`; every preset keeps the caller's own, in either call | trailing button: `onClick` (given the click event, optional when you call it yourself), then the toast closes; or what the function renders, given `dismiss`. Brings the X button and a persistent toast, see below |
430
430
  | `dismissLabel` | `string` | the translated “Close” when an `action` is given | accessible name of the X icon button beside the action; `''` hides it |
431
431
  | `role` | `'status' \| 'alert'` | none (`toasts.error`: `'alert'`) | live-region role. Toasts are already announced politely by the `Toaster`'s region; `alert` interrupts, and may be read twice by some screen readers |
432
432
  | `options` | Sonner `ExternalToast` | `duration: 5000` for presets, `Infinity` for `loading` and for any toast with your own `action` (a preset's fallback "Close" still times out at 5000) unless a `duration` is passed | passed to Sonner (`id`, `duration`, `position`…) |
@@ -438,7 +438,7 @@ forwarded; mount the one from `@nxgt/material/components`, not Sonner's own,
438
438
  or neither phone change below applies. `Toast` is the component each toast
439
439
  renders, for use with `sonnerToast.custom`.
440
440
 
441
- **Types:** `ToastAction`, `ToastProps`, `ToastMethodProps`, `ToasterProps`.
441
+ **Types:** `ToastAction`, `ToastProps`, `ToastMethodProps`, `ToastData`, `ToastArgs`, `ToasterProps`, and `PresetProps` (the props of `success`, `warning`, `info` and `error`: use it, not `Parameters<typeof toasts.success>[0]`, which is now a union with the `(message, data)` form).
442
442
 
443
443
  **On a phone** (under 600px wide, where Sonner lays toasts out across the
444
444
  screen), a `Toaster` with no `position` shows its toasts at the top
@@ -454,6 +454,27 @@ stay visible: `<Toaster mobileOffset={{ top: 72 }} />`.
454
454
  <Toaster position="bottom-center" /> // bottom-center everywhere
455
455
  ```
456
456
 
457
+ **sonner's call works too.** Every preset (`custom`, `success`, `info`,
458
+ `warning`, `error`, `loading`) also takes sonner's own `(message, data)`: the
459
+ message is the title, `data.description` and `data.action` are shown, and the
460
+ rest of `data` (`id`, `duration`, `onDismiss`…) is passed to sonner as the
461
+ options. `data` is typed `ToastData`, sonner's `ExternalToast` without `icon`
462
+ (a preset draws its own) and `cancel` (the X button stands for it): passing
463
+ either is a type error rather than a silent no-op.
464
+
465
+ ```ts
466
+ toasts.success('Staff member restored', {
467
+ description: 'They can sign in again.',
468
+ action: { label: 'Send an invitation', onClick: openInvite },
469
+ });
470
+ // the same as
471
+ toasts.success({
472
+ title: 'Staff member restored',
473
+ description: 'They can sign in again.',
474
+ action: { label: 'Send an invitation', onClick: openInvite },
475
+ });
476
+ ```
477
+
457
478
  **An action keeps the toast open.** `toast()` itself does it, so a preset and a
458
479
  direct call behave alike: any toast with an `action` is persistent by default
459
480
  (`options.duration: Infinity`, WCAG 2.2.1: a timed toast can vanish before a
@@ -471,10 +492,18 @@ elsewhere) is ignored, so a tapped toast still goes after its duration. On a
471
492
  touch screen a tap no longer fans out a stack of two or more toasts either: pass
472
493
  `expand` to keep the stack open. Sonner does not close a toast on Escape (it
473
494
  only collapses the stack); this `Toast` does when focus is inside it, with or
474
- without an action. The close button is reached with Tab. **Focus after a
475
- dismiss:** the dismissed toast leaves the page with the focused control in it,
476
- so focus falls back to `document.body`; move it yourself (`onClick`, or after
477
- `toasts.dismiss()`) when the flow needs it elsewhere.
495
+ without an action. The close button is reached with Tab.
496
+
497
+ **Focus after an action.** A click on a toast's action first gives the focus
498
+ back to the control that had it before the focus entered the toast, then runs
499
+ your `onClick`, then closes the toast; a function action's `dismiss` does the
500
+ same before it closes. So an action that opens a `Dialog` (or moves the focus
501
+ anywhere else) keeps it there: the dialog holds the control it focused once
502
+ the toast has gone, and gives the focus back to that earlier control when it
503
+ closes (WCAG 2.4.3). An action that moves the focus nowhere leaves it on that
504
+ earlier control. A toast closed by its X or by Escape takes its focused
505
+ control with it, so the focus falls back to `document.body`; move it yourself
506
+ (after `toasts.dismiss()`) when the flow needs it elsewhere.
478
507
 
479
508
  **Announced to screen readers:** `Toaster` renders a polite live region
480
509
  (`<section aria-live="polite">`) that is in the page before the first toast,
@@ -573,7 +573,7 @@ For sorting, paging and selection use `DataTable` on the
573
573
 
574
574
  ![Tabs](../previews/primitives-tabs.webp)
575
575
 
576
- Tabs whose triggers can take an icon. `variant="line"` is the quieter pill style.
576
+ Tabs whose triggers can take an icon, in two looks: `underline` (the default) and the `segmented` pill.
577
577
 
578
578
  ```tsx
579
579
  import {
@@ -598,16 +598,91 @@ import {
598
598
  </Tabs>;
599
599
  ```
600
600
 
601
- Parts: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`.
601
+ Parts: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`. `TabsList` and
602
+ `TabsTrigger` read the look from `Tabs`.
603
+
604
+ **`underline`** (the default) lays the tabs over a border; the active one
605
+ takes the primary colour, and a bar under it slides to the tab clicked or
606
+ reached with the arrow keys. The list scrolls sideways when the tabs do not
607
+ fit (its scrollbar hidden), which suits a phone or a narrow popover.
608
+
609
+ **`segmented`** is a neutral pill track: the active tab sits on a raised
610
+ surface that slides between tabs, and its label turns to the foreground
611
+ colour and semibold — the state never rests on the surface alone. It suits a
612
+ few short choices, such as a view switch.
613
+
614
+ ```tsx
615
+ <Tabs defaultValue="week" variant="segmented">
616
+ <TabsList>
617
+ <TabsTrigger value="day">Day</TabsTrigger>
618
+ <TabsTrigger value="week">Week</TabsTrigger>
619
+ <TabsTrigger value="month">Month</TabsTrigger>
620
+ </TabsList>
621
+ <TabsContent value="day">Today.</TabsContent>
622
+ <TabsContent value="week">This week.</TabsContent>
623
+ <TabsContent value="month">This month.</TabsContent>
624
+ </Tabs>
625
+ ```
626
+
627
+ `orientation="vertical"` lays the tabs in a column, the indicator on their
628
+ left side; the arrow keys become Up and Down.
629
+
630
+ ```tsx
631
+ <Tabs defaultValue="profile" orientation="vertical">
632
+ <TabsList>
633
+ <TabsTrigger value="profile">Profile</TabsTrigger>
634
+ <TabsTrigger value="security">Security</TabsTrigger>
635
+ </TabsList>
636
+ <TabsContent value="profile">Your profile.</TabsContent>
637
+ <TabsContent value="security">Your sessions.</TabsContent>
638
+ </Tabs>
639
+ ```
640
+
641
+ The sliding indicator is measured once the page runs: server HTML, and a
642
+ page without JavaScript, show a static indicator under (or behind) the
643
+ active tab instead, and hydrating swaps one for the other without changing
644
+ the markup. The list then carries `data-indicator="ready"`. The focus ring is
645
+ an outline in the primary colour inside the tab, so a scrolling list never
646
+ clips it.
647
+
648
+ With `TabsList asChild` the list is your child element and the sliding
649
+ indicator is placed inside it, measured against it, so the child must render
650
+ its children directly: a component child that wraps them in an inner element
651
+ hides the indicator.
652
+
653
+ `dir="rtl"` on `Tabs` (or Radix's `DirectionProvider`) runs the tabs from the
654
+ right: the indicator follows them, and the Left arrow key moves to the next
655
+ tab. Under `prefers-reduced-motion: reduce` the indicator jumps to the active
656
+ tab instead of sliding.
657
+
658
+ **A tab with only an icon needs a name.** A screen reader announces a
659
+ `TabsTrigger` by its text; with an icon and no label it is only "tab". Give it
660
+ `aria-label`, and `title` for sighted users who hover it:
661
+
662
+ ```tsx
663
+ <TabsTrigger value="recent" icon={<Clock />} aria-label="Recent" title="Recent" />
664
+ ```
665
+
666
+ The emoji picker's group tabs are named this way, from
667
+ `material.emoji.groups.*`.
668
+
669
+ **The default look changed.** A `Tabs` with no `variant` used to render the
670
+ boxed `bar` look (a primary ring around the active tab, a smaller label under
671
+ its icon on the phone); it now renders `underline`. `variant="bar"` and
672
+ `variant="line"` are deprecated aliases: `bar` renders as `underline`, `line`
673
+ as `segmented`. Both still type-check and render; write `underline` or
674
+ `segmented` instead.
602
675
 
603
676
  | Prop | Type | Default | Effect |
604
677
  | --- | --- | --- | --- |
605
- | `variant` (`Tabs`) | `'bar' \| 'line'` | `'bar'` | full-width bar of equal triggers, or the quieter line style |
678
+ | `variant` (`Tabs`) | `'underline' \| 'segmented' \| 'bar' \| 'line'` | `'underline'` | the look; `bar` and `line` are deprecated aliases of `underline` and `segmented` |
606
679
  | `defaultValue` / `value` (`Tabs`) | `string` | — | the selected tab, uncontrolled / controlled |
607
680
  | `onValueChange` (`Tabs`) | `(value: string) => void` | — | called when a trigger is selected |
608
- | `icon` (`TabsTrigger`) | `ReactNode` | — | shown before the label (above it on the phone in `bar`) |
681
+ | `orientation` (`Tabs`) | `'horizontal' \| 'vertical'` | `'horizontal'` | a row or a column, and the arrow keys' direction |
682
+ | `dir` (`Tabs`) | `'ltr' \| 'rtl'` | `'ltr'` | the reading direction: which way the tabs run and the arrow keys move |
683
+ | `icon` (`TabsTrigger`) | `ReactNode` | — | shown before the label |
609
684
 
610
- **Storybook:** `Primitives/Tabs` · **Vue:** `Tabs` (same parts, `variant="line"`)
685
+ **Storybook:** `Primitives/Tabs` (stories `Underline`, `Segmented`, `WithIcons`, `Scrolling`, `RightToLeft`, `Vertical`, `DeprecatedAliases`, `Hydrated`) · **Vue:** `Tabs` (same parts, the same variants, `icon` prop or `#icon` slot)
611
686
 
612
687
  ---
613
688
 
@@ -244,6 +244,16 @@ const EMOJIS: EmojiItem[] = [
244
244
  Parts: `EmojiPicker` (a button opening a popover), `EmojiList` (the searchable
245
245
  grid on its own, same `emojis` / `onSelect`), `expandEmojiShortcodes`.
246
246
 
247
+ The category tabs are icon-only. Each is named from
248
+ `material.emoji.groups.<group>` (for example `people_body`, `flags`): that name
249
+ is its `aria-label` and `title`, in the provider's language (see
250
+ [i18n](../guides/i18n.md)). An `EmojiItem` with no `group` falls under
251
+ `general`; a `group` is lowercased, with ` & ` and spaces turned into `_`
252
+ ("Food & Drink" becomes `food_drink`). A group the bundles do not name gets
253
+ its words, capitalised, as an English name (`hand_signs` becomes "Hand
254
+ signs"), and an icon of its own is not provided: it shows the generic grid
255
+ icon.
256
+
247
257
  | Prop | Type | Default | Effect |
248
258
  | --- | --- | --- | --- |
249
259
  | `emojis` | `EmojiItem[]` | — | the set offered; `group` drives the category tabs, `shortcodes` the search |