@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.
- package/CHANGELOG.md +43 -0
- package/README.md +2 -2
- package/dist/{_Uint8Array-CALbCR7W.js → _Uint8Array-azThpjEP.js} +1 -1
- package/dist/{_overRest-BQ8agsDH.js → _overRest-DMn4Dt71.js} +1 -1
- package/dist/{async-slice-BHMdvnqm.js → async-slice-DhZDjEtw.js} +2 -2
- package/dist/{blockDiagram-BEXU5L5S-D4gI6nqs.js → blockDiagram-BEXU5L5S-B8_AJyBb.js} +2 -2
- package/dist/{chunk-3FUC2YCW-BLMCnCFE.js → chunk-3FUC2YCW-AfTluaJD.js} +2 -2
- package/dist/{chunk-7M6MHVWA-CUtKEeuL.js → chunk-7M6MHVWA-B2FTOUoo.js} +1 -1
- package/dist/{chunk-GNY47TPC-CB_83G7J.js → chunk-GNY47TPC-CscSFMWi.js} +4 -4
- package/dist/{chunk-NETBCI7D-Cywmx0rz.js → chunk-NETBCI7D-iu8QN4Le.js} +1 -1
- package/dist/{chunk-Z7XXMR3K-Ccb3Rfjl.js → chunk-Z7XXMR3K-BICnZMWs.js} +1 -1
- package/dist/{classDiagram-v2-NBCMYWYE-CRgxPgLD.js → classDiagram-v2-NBCMYWYE-Cg2qBPTZ.js} +2 -2
- package/dist/{components-Bg1bqGbc.js → components-BfXTx1uS.js} +20734 -20660
- package/dist/components.js +5 -5
- package/dist/{dagre-6A5THRUB-c8yG3_vh.js → dagre-6A5THRUB-B9m4hqWN.js} +11 -11
- package/dist/{diagram-22UHCM2B-C3Xcfy6D.js → diagram-22UHCM2B-ChYYeBFB.js} +2 -2
- package/dist/{diagram-3UASUU5V-maEO61Bh.js → diagram-3UASUU5V-BoEmx9Kd.js} +1 -1
- package/dist/dnd.js +1 -1
- package/dist/{elk-276RUBZZ-BoWoJr6K.js → elk-276RUBZZ-CxNgT7Wb.js} +3 -3
- package/dist/{erDiagram-OPXOYQCR-CVvgZCSJ.js → erDiagram-OPXOYQCR-DiqLuL4t.js} +2 -2
- package/dist/{field-blur-Bwa48QBk.js → field-blur--x_n3oMy.js} +1 -1
- package/dist/{flowDiagram-KWPJA3E3-RdU0csul.js → flowDiagram-KWPJA3E3-CcUm8XN5.js} +3 -3
- package/dist/{ganttDiagram-FUAMR5RP-DPLDPJtJ.js → ganttDiagram-FUAMR5RP-fN1MVB5K.js} +1 -1
- package/dist/{graphlib-DHgEBs83.js → graphlib-DLjE3QPd.js} +6 -6
- package/dist/hooks.js +2 -2
- package/dist/{i18n-provider-CA8YAlje.js → i18n-provider-CQL7fqLy.js} +1 -1
- package/dist/i18n.js +6 -6
- package/dist/{isArrayLikeObject-BSfDsA7T.js → isArrayLikeObject-CO-5KAzG.js} +3 -3
- package/dist/{isEmpty-BEe-nNXw.js → isEmpty-Bl1drJE7.js} +3 -3
- package/dist/{journeyDiagram-ZHPQQLJL-CTGnr-JY.js → journeyDiagram-ZHPQQLJL-Cj7Vcat2.js} +1 -1
- package/dist/lib/components/ui/feedback/toast/index.d.ts +1 -0
- package/dist/lib/components/ui/feedback/toast/partials/toast-actions.d.ts +12 -2
- package/dist/lib/components/ui/feedback/toast/toast-data.d.ts +26 -0
- package/dist/lib/components/ui/feedback/toast/toast.d.ts +6 -3
- package/dist/lib/components/ui/feedback/toast/toasts.d.ts +18 -6
- package/dist/lib/components/ui/primitives/tabs/partials/tabs-content.d.ts +3 -0
- package/dist/lib/components/ui/primitives/tabs/partials/tabs-indicator.d.ts +13 -0
- package/dist/lib/components/ui/primitives/tabs/partials/tabs-list.d.ts +3 -0
- package/dist/lib/components/ui/primitives/tabs/partials/tabs-trigger.d.ts +6 -0
- package/dist/lib/components/ui/primitives/tabs/tabs-classes.d.ts +27 -0
- package/dist/lib/components/ui/primitives/tabs/tabs-variant.d.ts +5 -0
- package/dist/lib/components/ui/primitives/tabs/tabs.d.ts +11 -7
- package/dist/lib/components/ui/widgets/emoji/types.d.ts +1 -6
- package/dist/lib/i18n/resources/en/en.d.ts +14 -0
- package/dist/lib/i18n/resources/en/material.json.d.ts +15 -1
- package/dist/lib/i18n/resources/fr/fr.d.ts +14 -0
- package/dist/lib/i18n/resources/fr/material.json.d.ts +15 -1
- package/dist/lib/i18n/resources/resources.d.ts +28 -0
- package/dist/lib/i18n/translator.d.ts +1 -1
- package/dist/lib.js +3 -3
- package/dist/main.js +11 -11
- package/dist/map.js +2 -2
- package/dist/material.css +1 -1
- package/dist/{merge-CRXQ4NSv.js → merge-CwwtONfp.js} +4 -4
- package/dist/{mermaid.core-C_JPRVNa.js → mermaid.core-Be3u4qna.js} +21 -21
- package/dist/{mindmap-definition-NLK3R4M7-OTZIWZah.js → mindmap-definition-NLK3R4M7-Dw8Z4Lyy.js} +2 -2
- package/dist/{pieDiagram-5QR66LMP-BpmwlCYh.js → pieDiagram-5QR66LMP-Cv_V3nnp.js} +1 -1
- package/dist/print.js +2 -2
- package/dist/{quadrantDiagram-O4NWA36T-CIFt4MgA.js → quadrantDiagram-O4NWA36T-Bavlu0dy.js} +1 -1
- package/dist/{requirementDiagram-PLB6GJNP-BJaiDsKj.js → requirementDiagram-PLB6GJNP-6fInAtPO.js} +2 -2
- package/dist/{sankeyDiagram-IPEJSGJF-XDAIB5as.js → sankeyDiagram-IPEJSGJF-wzaUoPP7.js} +1 -1
- package/dist/{sortable-provider-MCgOzfRp.js → sortable-provider-WZT5I34N.js} +1 -1
- package/dist/{stateDiagram-v2-GCMORJYK-CGo16q99.js → stateDiagram-v2-GCMORJYK-BRIjnDU3.js} +2 -2
- package/dist/{stored-language-Cz89IYZX.js → stored-language-BW32owje.js} +30 -2
- package/dist/{swimlanes-2SLR337P-DXZt0zyd.js → swimlanes-2SLR337P-BNephno6.js} +3 -3
- package/dist/{swimlanesDiagram-TC7HE7FX-Cno6MSMH.js → swimlanesDiagram-TC7HE7FX-CUARDUGc.js} +3 -3
- package/dist/{timeline-definition-EJHVYXUP-CbPIZcT7.js → timeline-definition-EJHVYXUP-By2gWxfd.js} +1 -1
- package/dist/{translate-material-Caxsy0bp.js → translate-material-ZEzF-LKH.js} +2 -2
- package/dist/{translator-B85Q_O55.js → translator-BfqVlNGW.js} +1 -1
- package/dist/{use-heading-spy-C4yWEr5c.js → use-heading-spy-DvZVu15k.js} +2 -2
- package/dist/{use-material-translation-Cm3Ej3bT.js → use-material-translation-B2GUtxUY.js} +2 -2
- package/dist/{usecaseDiagram-POWQR4AR-D_gyFA3m.js → usecaseDiagram-POWQR4AR-CleiKWa8.js} +2 -2
- package/dist/{xychartDiagram-PMCCYNJV-W-fXV6iN.js → xychartDiagram-PMCCYNJV-gwrRH4uJ.js} +1 -1
- package/docs/components/data-display.md +1 -1
- package/docs/components/feedback-and-status.md +35 -6
- package/docs/components/primitives.md +80 -5
- package/docs/components/rich-widgets.md +10 -0
- package/docs/guides/i18n.md +19 -2
- package/docs/guides/theming.md +17 -3
- package/docs/previews/data-display-codegroup.webp +0 -0
- package/docs/previews/primitives-tabs.webp +0 -0
- package/docs/previews/rich-widgets-emojipicker.webp +0 -0
- package/docs/roadmap.md +12 -0
- package/docs/troubleshooting.md +82 -0
- package/package.json +2 -2
- 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-
|
|
2
|
-
import { n as s, r as c } from "./_overRest-
|
|
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-
|
|
4
|
-
import { n as y, r as b, t as x } from "./isArrayLikeObject-
|
|
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-
|
|
11
|
+
import "./chunk-Z7XXMR3K-BICnZMWs.js";
|
|
12
12
|
import "./chunk-UA2S7LBM-ChuksCDg.js";
|
|
13
|
-
import { n as ge } from "./chunk-GNY47TPC-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
603
|
+
let { diagram: e } = await import("./usecaseDiagram-POWQR4AR-CleiKWa8.js");
|
|
604
604
|
return {
|
|
605
605
|
id: nn,
|
|
606
606
|
diagram: e
|
package/dist/{mindmap-definition-NLK3R4M7-OTZIWZah.js → mindmap-definition-NLK3R4M7-Dw8Z4Lyy.js}
RENAMED
|
@@ -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-
|
|
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-
|
|
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-
|
|
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-
|
|
2
|
-
import { t } from "./translate-material-
|
|
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-
|
|
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";
|
package/dist/{requirementDiagram-PLB6GJNP-BJaiDsKj.js → requirementDiagram-PLB6GJNP-6fInAtPO.js}
RENAMED
|
@@ -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-
|
|
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-
|
|
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,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-
|
|
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-
|
|
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-
|
|
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-
|
|
10
|
+
import "./chunk-Z7XXMR3K-BICnZMWs.js";
|
|
11
11
|
import "./chunk-UA2S7LBM-ChuksCDg.js";
|
|
12
|
-
import { r as n } from "./chunk-3FUC2YCW-
|
|
13
|
-
import { t as r } from "./chunk-NETBCI7D-
|
|
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;
|
package/dist/{swimlanesDiagram-TC7HE7FX-Cno6MSMH.js → swimlanesDiagram-TC7HE7FX-CUARDUGc.js}
RENAMED
|
@@ -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-
|
|
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-
|
|
15
|
+
import "./chunk-GNY47TPC-CscSFMWi.js";
|
|
16
16
|
import "./chunk-LNGE3PJU-DJjGTS7O.js";
|
|
17
|
-
import { r as t, t as n } from "./chunk-7M6MHVWA-
|
|
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 {
|
package/dist/{timeline-definition-EJHVYXUP-CbPIZcT7.js → timeline-definition-EJHVYXUP-By2gWxfd.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ct as e } from "./components-
|
|
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-
|
|
2
|
-
import { E as e, r as t } from "./translator-
|
|
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-
|
|
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-
|
|
2
|
-
import { r as t } from "./i18n-provider-
|
|
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-
|
|
2
|
-
import { t } from "./translate-material-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|

|
|
481
481
|
|
|
482
|
-
Highlighted code with line numbers and copy, a Monaco diff, a collapsible JSON tree, and tabbed samples (`Tabs
|
|
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`;
|
|
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.
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
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
|

|
|
575
575
|
|
|
576
|
-
Tabs whose triggers can take an icon
|
|
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'` | `'
|
|
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
|
-
| `
|
|
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, `
|
|
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 |
|