@tempots/beatui 0.39.0 → 0.40.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 (82) hide show
  1. package/dist/{2019-1S9vgvv2.cjs → 2019-nWH_nAwT.cjs} +1 -1
  2. package/dist/{2019-DPD_eCKE.js → 2019-sCKLAY8c.js} +2 -2
  3. package/dist/{2020-aLm9VmDL.js → 2020-B4xCW_nu.js} +2 -2
  4. package/dist/{2020-CGrbEEmD.cjs → 2020-D7RWX09D.cjs} +1 -1
  5. package/dist/{ar-B0vT_MPe.cjs → ar-D_4BfIJO.cjs} +1 -1
  6. package/dist/{ar-CbM09z5P.js → ar-i2uHmy8P.js} +1 -1
  7. package/dist/auth/index.cjs.js +1 -1
  8. package/dist/auth/index.es.js +54 -49
  9. package/dist/beatui.css +181 -107
  10. package/dist/beatui.tailwind.css +181 -107
  11. package/dist/{de-tK36cL_u.cjs → de-C0PZz9sE.cjs} +1 -1
  12. package/dist/{de-Dd907tZQ.js → de-CeLwmVZz.js} +1 -1
  13. package/dist/{es-K35LRZa-.cjs → es-C8qT1ins.cjs} +1 -1
  14. package/dist/{es-BkJxjMdG.js → es-DxOgARww.js} +1 -1
  15. package/dist/{fa-DBTUBsw_.js → fa-B9pEff8A.js} +1 -1
  16. package/dist/{fa-BBikwwku.cjs → fa-BFV9MxMX.cjs} +1 -1
  17. package/dist/{fr-DMtXrrnJ.cjs → fr-BBx5IJ7G.cjs} +1 -1
  18. package/dist/{fr-Fmupo556.js → fr-Caeevx56.js} +1 -1
  19. package/dist/{he-on3Ivp8g.cjs → he-CMOvd4Dr.cjs} +1 -1
  20. package/dist/{he-DkI64oaY.js → he-DeN-WW3u.js} +1 -1
  21. package/dist/{hi-GdD5MihT.js → hi-Dey2HxiD.js} +1 -1
  22. package/dist/{hi-CNFV8ITE.cjs → hi-IOU_PzvH.cjs} +1 -1
  23. package/dist/{index-e8oQ-k0x.cjs → index-B0ff5lT-.cjs} +4 -4
  24. package/dist/{index-BkQ7xHgi.js → index-BTZqW3-b.js} +1245 -1232
  25. package/dist/{index-wdi93sK4.cjs → index-C2VAPX2b.cjs} +1 -1
  26. package/dist/{index-DjShJtXp.js → index-CAeOFdez.js} +1 -1
  27. package/dist/{index-BI5w0jSz.js → index-CBT2SLat.js} +224 -223
  28. package/dist/{index-Bv2gn_kV.cjs → index-ClFVnBUS.cjs} +3 -3
  29. package/dist/{index-BA93M8Ux.cjs → index-D8fg48Fv.cjs} +1 -1
  30. package/dist/{index-BfFlhmAq.js → index-DJqo6Guq.js} +1 -1
  31. package/dist/{index-CPBlySmE.cjs → index-Dtka01mK.cjs} +12 -12
  32. package/dist/{index-BK8t6gqu.js → index-HqWBd-jW.js} +680 -677
  33. package/dist/{index-LUItEwlw.js → index-IQ3lRaL0.js} +1 -1
  34. package/dist/{index-CKyH3jwP.cjs → index-KPHFBjQB.cjs} +1 -1
  35. package/dist/index.cjs.js +4 -4
  36. package/dist/index.es.js +1489 -1467
  37. package/dist/{it-Bpnfd60V.js → it-DghnQdZa.js} +1 -1
  38. package/dist/{it-BDOzBRkQ.cjs → it-uQF0jkDT.cjs} +1 -1
  39. package/dist/{ja-N-7c7zD7.cjs → ja-BJD6uPbl.cjs} +1 -1
  40. package/dist/{ja-SjlGNgs9.js → ja-Kb7rxmFg.js} +1 -1
  41. package/dist/json-schema/index.cjs.js +1 -1
  42. package/dist/json-schema/index.es.js +1 -1
  43. package/dist/{ko-CH69ZNts.js → ko-53o5WJ-v.js} +1 -1
  44. package/dist/{ko-BBeTXIlY.cjs → ko-B7bLdRnp.cjs} +1 -1
  45. package/dist/markdown/index.cjs.js +1 -1
  46. package/dist/markdown/index.es.js +1 -1
  47. package/dist/modal-BRUgTJG9.cjs +1 -0
  48. package/dist/{modal-BD76Rve3.js → modal-_2B8vIo0.js} +234 -209
  49. package/dist/{nl-C2C9QDH2.cjs → nl-CJE0fC8g.cjs} +1 -1
  50. package/dist/{nl-DnvMlW8v.js → nl-DvUVT7xd.js} +1 -1
  51. package/dist/{notice-CQZseCQs.js → notice-C4n5jXi6.js} +196 -186
  52. package/dist/notice-CncwkUTy.cjs +2 -0
  53. package/dist/{pl-CBEX2qN1.js → pl-C3oYeTwf.js} +1 -1
  54. package/dist/{pl-sNBCzEUd.cjs → pl-DUaY5slY.cjs} +1 -1
  55. package/dist/prosemirror/index.cjs.js +1 -1
  56. package/dist/prosemirror/index.es.js +1 -1
  57. package/dist/{pt-Bvxg9VEA.cjs → pt-BAqNKCuy.cjs} +1 -1
  58. package/dist/{pt-ByFqFAdQ.js → pt-BJGeScun.js} +1 -1
  59. package/dist/{ru-6d5JfoDw.js → ru-2irv1YXp.js} +1 -1
  60. package/dist/{ru-CPAdsn4m.cjs → ru-CAlgJm3K.cjs} +1 -1
  61. package/dist/{toolbar-Dw2VQD9y.cjs → toolbar-B7HrL0vD.cjs} +1 -1
  62. package/dist/{toolbar-Cl_TAa3r.js → toolbar-CVDXVnje.js} +1 -1
  63. package/dist/{tr-gv4vJfm8.js → tr-CkHLE5u7.js} +1 -1
  64. package/dist/{tr-IKZtCQQR.cjs → tr-DMiXAhok.cjs} +1 -1
  65. package/dist/{translations-djDSPqdb.js → translations-DEEflRUY.js} +61 -60
  66. package/dist/{translations-CK426qyd.cjs → translations-DRNj0YIi.cjs} +1 -1
  67. package/dist/{translations-DJR65Jii.cjs → translations-Dw1oO6Dh.cjs} +1 -1
  68. package/dist/{translations-DXLmnUiB.js → translations-Q5C5LyIi.js} +1 -1
  69. package/dist/types/components/misc/notification-provider.d.ts +3 -3
  70. package/dist/types/utils/use-animated-toggle.d.ts +17 -4
  71. package/dist/{ur-Bgq_2yjr.cjs → ur-BjiNs3SL.cjs} +1 -1
  72. package/dist/{ur-Bo6bjEBS.js → ur-bxBR_9Z-.js} +1 -1
  73. package/dist/{utils-Bw911Eo4.js → utils-BCbc19N0.js} +202 -193
  74. package/dist/utils-BJZipnfW.cjs +1 -0
  75. package/dist/{vi-BrUQnj-8.cjs → vi-CByOZvV2.cjs} +1 -1
  76. package/dist/{vi-xDLJ3TIx.js → vi-CKknZqol.js} +1 -1
  77. package/dist/{zh-BqH1Cioq.cjs → zh-C0QOebEA.cjs} +1 -1
  78. package/dist/{zh-BivWxJJh.js → zh-CmUgcP9o.js} +1 -1
  79. package/package.json +4 -3
  80. package/dist/modal-DQycMZ8_.cjs +0 -1
  81. package/dist/notice-CFoc4PJe.cjs +0 -2
  82. package/dist/utils-Bsrfm-0d.cjs +0 -1
package/dist/beatui.css CHANGED
@@ -1241,14 +1241,20 @@ a:focus-visible {
1241
1241
  }
1242
1242
  }
1243
1243
 
1244
- /* Animated Toggle Component */
1244
+ /* Animated Toggle Component - Composable Animation System */
1245
1245
  .bc-animated-toggle {
1246
- transition-property: all;
1247
- transition-duration: 1s;
1248
- transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
1246
+ --animation-duration: 1s;
1247
+ --animation-easing: cubic-bezier(0.2, 0, 0, 1);
1248
+ --scale-factor: 0.95;
1249
+ --transform-origin: center;
1250
+
1251
+ transition-property: opacity, transform;
1252
+ transition-duration: var(--animation-duration);
1253
+ transition-timing-function: var(--animation-easing);
1254
+ transform-origin: var(--transform-origin);
1249
1255
  }
1250
1256
 
1251
- /* Status: closed and start-closing - element is hidden */
1257
+ /* Status: closed - element is hidden */
1252
1258
  .bc-animated-toggle--closed {
1253
1259
  display: none;
1254
1260
  }
@@ -1261,178 +1267,243 @@ a:focus-visible {
1261
1267
  /* Animation: NONE - no animation, just show/hide */
1262
1268
  .bc-animated-toggle--none {
1263
1269
  transition-property: none;
1270
+ transition-duration: 0s;
1264
1271
  }
1265
1272
 
1266
1273
  /* Animation: FADE */
1267
1274
  .bc-animated-toggle--fade.bc-animated-toggle--closing,
1268
- .bc-animated-toggle--fade.bc-animated-toggle--start-opening,
1269
- .bc-animated-toggle--fade-slide-up.bc-animated-toggle--closing,
1270
- .bc-animated-toggle--fade-slide-up.bc-animated-toggle--start-opening,
1271
- .bc-animated-toggle--fade-slide-down.bc-animated-toggle--closing,
1272
- .bc-animated-toggle--fade-slide-down.bc-animated-toggle--start-opening,
1273
- .bc-animated-toggle--fade-slide-left.bc-animated-toggle--closing,
1274
- .bc-animated-toggle--fade-slide-left.bc-animated-toggle--start-opening,
1275
- .bc-animated-toggle--fade-slide-right.bc-animated-toggle--closing,
1276
- .bc-animated-toggle--fade-slide-right.bc-animated-toggle--start-opening,
1277
- .bc-animated-toggle--scale-fade.bc-animated-toggle--closing,
1278
- .bc-animated-toggle--scale-fade.bc-animated-toggle--start-opening,
1279
- .bc-animated-toggle--flyout-top.bc-animated-toggle--closing,
1280
- .bc-animated-toggle--flyout-top.bc-animated-toggle--start-opening,
1281
- .bc-animated-toggle--flyout-bottom.bc-animated-toggle--closing,
1282
- .bc-animated-toggle--flyout-bottom.bc-animated-toggle--start-opening,
1283
- .bc-animated-toggle--flyout-left.bc-animated-toggle--closing,
1284
- .bc-animated-toggle--flyout-left.bc-animated-toggle--start-opening,
1285
- .bc-animated-toggle--flyout-right.bc-animated-toggle--closing,
1286
- .bc-animated-toggle--flyout-right.bc-animated-toggle--start-opening {
1275
+ .bc-animated-toggle--fade.bc-animated-toggle--start-opening {
1287
1276
  opacity: 0;
1288
1277
  }
1289
1278
 
1290
1279
  .bc-animated-toggle--fade.bc-animated-toggle--opening,
1291
- .bc-animated-toggle--fade.bc-animated-toggle--start-closing,
1292
- .bc-animated-toggle--fade-slide-up.bc-animated-toggle--opening,
1293
- .bc-animated-toggle--fade-slide-up.bc-animated-toggle--start-closing,
1294
- .bc-animated-toggle--fade-slide-down.bc-animated-toggle--opening,
1295
- .bc-animated-toggle--fade-slide-down.bc-animated-toggle--start-closing,
1296
- .bc-animated-toggle--fade-slide-left.bc-animated-toggle--opening,
1297
- .bc-animated-toggle--fade-slide-left.bc-animated-toggle--start-closing,
1298
- .bc-animated-toggle--fade-slide-right.bc-animated-toggle--opening,
1299
- .bc-animated-toggle--fade-slide-right.bc-animated-toggle--start-closing,
1300
- .bc-animated-toggle--scale-fade.bc-animated-toggle--opening,
1301
- .bc-animated-toggle--scale-fade.bc-animated-toggle--start-closing,
1302
- .bc-animated-toggle--flyout-top.bc-animated-toggle--opening,
1303
- .bc-animated-toggle--flyout-top.bc-animated-toggle--start-closing,
1304
- .bc-animated-toggle--flyout-bottom.bc-animated-toggle--opening,
1305
- .bc-animated-toggle--flyout-bottom.bc-animated-toggle--start-closing,
1306
- .bc-animated-toggle--flyout-left.bc-animated-toggle--opening,
1307
- .bc-animated-toggle--flyout-left.bc-animated-toggle--start-closing,
1308
- .bc-animated-toggle--flyout-right.bc-animated-toggle--opening,
1309
- .bc-animated-toggle--flyout-right.bc-animated-toggle--start-closing {
1280
+ .bc-animated-toggle--fade.bc-animated-toggle--opened,
1281
+ .bc-animated-toggle--fade.bc-animated-toggle--start-closing {
1310
1282
  opacity: 1;
1311
1283
  }
1312
1284
 
1313
- /* Animation: slide-right */
1285
+ /* Animation: SLIDE - individual directions */
1314
1286
  .bc-animated-toggle--slide-right.bc-animated-toggle--closing,
1315
- .bc-animated-toggle--slide-right.bc-animated-toggle--start-opening,
1316
- .bc-animated-toggle--fade-slide-right.bc-animated-toggle--closing,
1317
- .bc-animated-toggle--fade-slide-right.bc-animated-toggle--start-opening {
1287
+ .bc-animated-toggle--slide-right.bc-animated-toggle--start-opening {
1318
1288
  transform: translateX(-100%);
1319
1289
  }
1320
1290
 
1321
1291
  .bc-animated-toggle--slide-right.bc-animated-toggle--opening,
1322
- .bc-animated-toggle--slide-right.bc-animated-toggle--start-closing,
1323
- .bc-animated-toggle--fade-slide-right.bc-animated-toggle--opening,
1324
- .bc-animated-toggle--fade-slide-right.bc-animated-toggle--start-closing {
1292
+ .bc-animated-toggle--slide-right.bc-animated-toggle--opened,
1293
+ .bc-animated-toggle--slide-right.bc-animated-toggle--start-closing {
1325
1294
  transform: translateX(0);
1326
1295
  }
1327
1296
 
1328
- /* Animation: slide-left */
1329
1297
  .bc-animated-toggle--slide-left.bc-animated-toggle--closing,
1330
- .bc-animated-toggle--slide-left.bc-animated-toggle--start-opening,
1331
- .bc-animated-toggle--fade-slide-left.bc-animated-toggle--closing,
1332
- .bc-animated-toggle--fade-slide-left.bc-animated-toggle--start-opening {
1298
+ .bc-animated-toggle--slide-left.bc-animated-toggle--start-opening {
1333
1299
  transform: translateX(100%);
1334
1300
  }
1335
1301
 
1336
1302
  .bc-animated-toggle--slide-left.bc-animated-toggle--opening,
1337
- .bc-animated-toggle--slide-left.bc-animated-toggle--start-closing,
1338
- .bc-animated-toggle--fade-slide-left.bc-animated-toggle--opening,
1339
- .bc-animated-toggle--fade-slide-left.bc-animated-toggle--start-closing {
1303
+ .bc-animated-toggle--slide-left.bc-animated-toggle--opened,
1304
+ .bc-animated-toggle--slide-left.bc-animated-toggle--start-closing {
1340
1305
  transform: translateX(0);
1341
1306
  }
1342
1307
 
1343
- /* Animation: slide-up */
1344
1308
  .bc-animated-toggle--slide-up.bc-animated-toggle--closing,
1345
- .bc-animated-toggle--slide-up.bc-animated-toggle--start-opening,
1346
- .bc-animated-toggle--fade-slide-up.bc-animated-toggle--closing,
1347
- .bc-animated-toggle--fade-slide-up.bc-animated-toggle--start-opening {
1309
+ .bc-animated-toggle--slide-up.bc-animated-toggle--start-opening {
1348
1310
  transform: translateY(100%);
1349
1311
  }
1350
1312
 
1351
1313
  .bc-animated-toggle--slide-up.bc-animated-toggle--opening,
1352
- .bc-animated-toggle--slide-up.bc-animated-toggle--start-closing,
1353
- .bc-animated-toggle--fade-slide-up.bc-animated-toggle--opening,
1354
- .bc-animated-toggle--fade-slide-up.bc-animated-toggle--start-closing {
1314
+ .bc-animated-toggle--slide-up.bc-animated-toggle--opened,
1315
+ .bc-animated-toggle--slide-up.bc-animated-toggle--start-closing {
1355
1316
  transform: translateY(0);
1356
1317
  }
1357
1318
 
1358
- /* Animation: slide-down */
1359
1319
  .bc-animated-toggle--slide-down.bc-animated-toggle--closing,
1360
- .bc-animated-toggle--slide-down.bc-animated-toggle--start-opening,
1361
- .bc-animated-toggle--fade-slide-down.bc-animated-toggle--closing,
1362
- .bc-animated-toggle--fade-slide-down.bc-animated-toggle--start-opening {
1320
+ .bc-animated-toggle--slide-down.bc-animated-toggle--start-opening {
1363
1321
  transform: translateY(-100%);
1364
1322
  }
1365
1323
 
1366
1324
  .bc-animated-toggle--slide-down.bc-animated-toggle--opening,
1367
- .bc-animated-toggle--slide-down.bc-animated-toggle--start-closing,
1368
- .bc-animated-toggle--fade-slide-down.bc-animated-toggle--opening,
1369
- .bc-animated-toggle--fade-slide-down.bc-animated-toggle--start-closing {
1325
+ .bc-animated-toggle--slide-down.bc-animated-toggle--opened,
1326
+ .bc-animated-toggle--slide-down.bc-animated-toggle--start-closing {
1370
1327
  transform: translateY(0);
1371
1328
  }
1372
1329
 
1373
- /* Animation: scale */
1330
+ /* Animation: SCALE */
1374
1331
  .bc-animated-toggle--scale.bc-animated-toggle--closing,
1375
- .bc-animated-toggle--scale.bc-animated-toggle--start-opening,
1376
- .bc-animated-toggle--scale-fade.bc-animated-toggle--closing,
1377
- .bc-animated-toggle--scale-fade.bc-animated-toggle--start-opening {
1378
- transform: scale(0.8);
1332
+ .bc-animated-toggle--scale.bc-animated-toggle--start-opening {
1333
+ transform: scale(var(--scale-factor));
1379
1334
  }
1380
1335
 
1381
1336
  .bc-animated-toggle--scale.bc-animated-toggle--opening,
1382
- .bc-animated-toggle--scale.bc-animated-toggle--start-closing,
1383
- .bc-animated-toggle--scale-fade.bc-animated-toggle--opening,
1384
- .bc-animated-toggle--scale-fade.bc-animated-toggle--start-closing {
1337
+ .bc-animated-toggle--scale.bc-animated-toggle--opened,
1338
+ .bc-animated-toggle--scale.bc-animated-toggle--start-closing {
1385
1339
  transform: scale(1);
1386
1340
  }
1387
1341
 
1388
- /* Animation: flyout-top */
1389
- .bc-animated-toggle--flyout-top.bc-animated-toggle--closing,
1390
- .bc-animated-toggle--flyout-top.bc-animated-toggle--start-opening {
1391
- transform: translateY(-1rem) scale(0.95);
1342
+ /* Composable animations: fade + slide combinations */
1343
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--closing,
1344
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--start-opening {
1345
+ opacity: 0;
1346
+ transform: translateX(-100%);
1347
+ }
1348
+
1349
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--opening,
1350
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--opened,
1351
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--start-closing {
1352
+ opacity: 1;
1353
+ transform: translateX(0);
1354
+ }
1355
+
1356
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--closing,
1357
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--start-opening {
1358
+ opacity: 0;
1359
+ transform: translateX(100%);
1360
+ }
1361
+
1362
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--opening,
1363
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--opened,
1364
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--start-closing {
1365
+ opacity: 1;
1366
+ transform: translateX(0);
1367
+ }
1368
+
1369
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--closing,
1370
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--start-opening {
1371
+ opacity: 0;
1372
+ transform: translateY(100%);
1373
+ }
1374
+
1375
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--opening,
1376
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--opened,
1377
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--start-closing {
1378
+ opacity: 1;
1379
+ transform: translateY(0);
1380
+ }
1381
+
1382
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--closing,
1383
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--start-opening {
1384
+ opacity: 0;
1385
+ transform: translateY(-100%);
1386
+ }
1387
+
1388
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--opening,
1389
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--opened,
1390
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--start-closing {
1391
+ opacity: 1;
1392
+ transform: translateY(0);
1392
1393
  }
1393
1394
 
1394
- .bc-animated-toggle--flyout-top.bc-animated-toggle--opening,
1395
- .bc-animated-toggle--flyout-top.bc-animated-toggle--start-closing {
1395
+ /* Composable animations: fade + scale */
1396
+ .bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--closing,
1397
+ .bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
1398
+ opacity: 0;
1399
+ transform: scale(var(--scale-factor));
1400
+ }
1401
+
1402
+ .bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--opening,
1403
+ .bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--opened,
1404
+ .bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
1405
+ opacity: 1;
1406
+ transform: scale(1);
1407
+ }
1408
+
1409
+ /* Composable animations: slide + scale combinations */
1410
+ .bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--closing,
1411
+ .bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
1412
+ transform: translateX(-100%) scale(var(--scale-factor));
1413
+ }
1414
+
1415
+ .bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opening,
1416
+ .bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opened,
1417
+ .bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
1418
+ transform: translateX(0) scale(1);
1419
+ }
1420
+
1421
+ .bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--closing,
1422
+ .bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
1423
+ transform: translateX(100%) scale(var(--scale-factor));
1424
+ }
1425
+
1426
+ .bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opened,
1427
+ .bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opening,
1428
+ .bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
1429
+ transform: translateX(0) scale(1);
1430
+ }
1431
+
1432
+ .bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--closing,
1433
+ .bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
1434
+ transform: translateY(100%) scale(var(--scale-factor));
1435
+ }
1436
+
1437
+ .bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opening,
1438
+ .bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opened,
1439
+ .bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
1396
1440
  transform: translateY(0) scale(1);
1397
1441
  }
1398
1442
 
1399
- /* Animation: flyout-bottom */
1400
- .bc-animated-toggle--flyout-bottom.bc-animated-toggle--closing,
1401
- .bc-animated-toggle--flyout-bottom.bc-animated-toggle--start-opening {
1402
- transform: translateY(1rem) scale(0.95);
1443
+ .bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--closing,
1444
+ .bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
1445
+ transform: translateY(-100%) scale(var(--scale-factor));
1403
1446
  }
1404
1447
 
1405
- .bc-animated-toggle--flyout-bottom.bc-animated-toggle--opening,
1406
- .bc-animated-toggle--flyout-bottom.bc-animated-toggle--start-closing {
1448
+ .bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opening,
1449
+ .bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opened,
1450
+ .bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
1407
1451
  transform: translateY(0) scale(1);
1408
1452
  }
1409
1453
 
1410
- /* Animation: flyout-left */
1411
- .bc-animated-toggle--flyout-left.bc-animated-toggle--closing,
1412
- .bc-animated-toggle--flyout-left.bc-animated-toggle--start-opening {
1454
+ /* Composable animations: fade + slide + scale (all three) */
1455
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--closing,
1456
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
1413
1457
  opacity: 0;
1414
- transform: translateX(-1rem) scale(0.95);
1458
+ transform: translateX(-100%) scale(var(--scale-factor));
1415
1459
  }
1416
1460
 
1417
- .bc-animated-toggle--flyout-left.bc-animated-toggle--opening,
1418
- .bc-animated-toggle--flyout-left.bc-animated-toggle--start-closing {
1461
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opening,
1462
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opened,
1463
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
1419
1464
  opacity: 1;
1420
1465
  transform: translateX(0) scale(1);
1421
1466
  }
1422
1467
 
1423
- /* Animation: flyout-right */
1424
- .bc-animated-toggle--flyout-right.bc-animated-toggle--closing,
1425
- .bc-animated-toggle--flyout-right.bc-animated-toggle--start-opening {
1468
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--closing,
1469
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
1426
1470
  opacity: 0;
1427
- transform: translateX(1rem) scale(0.95);
1471
+ transform: translateX(100%) scale(var(--scale-factor));
1428
1472
  }
1429
1473
 
1430
- .bc-animated-toggle--flyout-right.bc-animated-toggle--opening,
1431
- .bc-animated-toggle--flyout-right.bc-animated-toggle--start-closing {
1474
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opening,
1475
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opened,
1476
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
1432
1477
  opacity: 1;
1433
1478
  transform: translateX(0) scale(1);
1434
1479
  }
1435
1480
 
1481
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--closing,
1482
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
1483
+ opacity: 0;
1484
+ transform: translateY(100%) scale(var(--scale-factor));
1485
+ }
1486
+
1487
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opening,
1488
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opened,
1489
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
1490
+ opacity: 1;
1491
+ transform: translateY(0) scale(1);
1492
+ }
1493
+
1494
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--closing,
1495
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
1496
+ opacity: 0;
1497
+ transform: translateY(-100%) scale(var(--scale-factor));
1498
+ }
1499
+
1500
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opening,
1501
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opened,
1502
+ .bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
1503
+ opacity: 1;
1504
+ transform: translateY(0) scale(1);
1505
+ }
1506
+
1436
1507
  /* Accessibility: Reduced motion */
1437
1508
  @media (prefers-reduced-motion: reduce) {
1438
1509
  .bc-animated-toggle {
@@ -2451,7 +2522,7 @@ a:focus-visible {
2451
2522
  border-radius: var(--radius-popover, var(--radius-md));
2452
2523
  box-shadow: var(--shadow-popover, var(--shadow-lg));
2453
2524
  padding: 0;
2454
- z-index: var(--z-index-popover);
2525
+ z-index: var(--z-index-navigation);
2455
2526
  min-width: 12rem;
2456
2527
  max-height: 20rem;
2457
2528
  overflow-y: auto;
@@ -3642,6 +3713,10 @@ a:focus-visible {
3642
3713
  display: block;
3643
3714
  }
3644
3715
 
3716
+ .bc-flyout-container {
3717
+ z-index: var(--z-index-popover);
3718
+ }
3719
+
3645
3720
  .bc-flyout {
3646
3721
  /* Base flyout styles */
3647
3722
  background-color: var(--color-neutral-50);
@@ -3649,7 +3724,6 @@ a:focus-visible {
3649
3724
  border-radius: var(--radius-popover, var(--radius-md));
3650
3725
  box-shadow: var(--shadow-popover, var(--shadow-lg));
3651
3726
  padding: var(--spacing-sm);
3652
- z-index: var(--z-index-popover);
3653
3727
  }
3654
3728
 
3655
3729
  /* Transform origins for placement-aware animations */
@@ -3867,7 +3941,7 @@ a:focus-visible {
3867
3941
 
3868
3942
  /* Focus within state */
3869
3943
  .bc-input-container:focus-within {
3870
- z-index: 10;
3944
+ z-index: var(--z-index-navigation);
3871
3945
  outline: 2px solid var(--interactive-focus-light);
3872
3946
  outline-offset: -2px;
3873
3947
  }
@@ -3889,7 +3963,7 @@ a:focus-visible {
3889
3963
  display: flex;
3890
3964
  flex-direction: row;
3891
3965
  align-items: center;
3892
- z-index: 10;
3966
+ z-index: var(--z-index-navigation);
3893
3967
  }
3894
3968
 
3895
3969
  /* Input wrapper */