@womp/kookie-ui 0.27.0 → 0.28.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 (45) hide show
  1. package/components.css +25 -24
  2. package/dist/cjs/components/_internal/pane-chrome.d.ts +6 -0
  3. package/dist/cjs/components/_internal/pane-chrome.d.ts.map +1 -1
  4. package/dist/cjs/components/_internal/pane-chrome.js +1 -1
  5. package/dist/cjs/components/_internal/pane-chrome.js.map +3 -3
  6. package/dist/cjs/components/_internal/shell-sidebar.js +1 -1
  7. package/dist/cjs/components/_internal/shell-sidebar.js.map +3 -3
  8. package/dist/cjs/components/index.js +2 -2
  9. package/dist/cjs/components/index.js.map +3 -3
  10. package/dist/cjs/components/shell.js +1 -1
  11. package/dist/cjs/components/shell.js.map +3 -3
  12. package/dist/cjs/components/sidebar.js +1 -1
  13. package/dist/cjs/components/sidebar.js.map +3 -3
  14. package/dist/cjs/components/toolbar.js +1 -1
  15. package/dist/cjs/components/toolbar.js.map +3 -3
  16. package/dist/cjs/index.js +2 -2
  17. package/dist/cjs/index.js.map +3 -3
  18. package/dist/esm/{chunk-3MFSQ6PN.js → chunk-2FYUM6TA.js} +2 -2
  19. package/dist/esm/{chunk-6HEORZNJ.js → chunk-4LV37PHM.js} +2 -2
  20. package/dist/esm/{chunk-H73AMXCH.js → chunk-AS2STDGA.js} +2 -2
  21. package/dist/esm/{chunk-25ZRMILM.js → chunk-JTMLFTNZ.js} +2 -2
  22. package/dist/esm/chunk-MJROOEPE.js +3 -0
  23. package/dist/esm/{chunk-TSWHVZ47.js.map → chunk-MJROOEPE.js.map} +3 -3
  24. package/dist/esm/components/_internal/pane-chrome.d.ts +6 -0
  25. package/dist/esm/components/_internal/pane-chrome.d.ts.map +1 -1
  26. package/dist/esm/components/_internal/pane-chrome.js +1 -1
  27. package/dist/esm/components/_internal/shell-sidebar.js +1 -1
  28. package/dist/esm/components/index.js +1 -1
  29. package/dist/esm/components/shell.js +1 -1
  30. package/dist/esm/components/sidebar.js +1 -1
  31. package/dist/esm/components/toolbar.js +1 -1
  32. package/dist/esm/index.js +1 -1
  33. package/package.json +1 -1
  34. package/src/components/_internal/base-menu.css +4 -4
  35. package/src/components/_internal/pane-chrome.tsx +8 -2
  36. package/src/components/message-scroller.css +3 -0
  37. package/src/styles/tokens/radius.css +66 -25
  38. package/styles.css +89 -61
  39. package/tokens/base.css +64 -37
  40. package/tokens.css +64 -37
  41. package/dist/esm/chunk-TSWHVZ47.js +0 -3
  42. /package/dist/esm/{chunk-3MFSQ6PN.js.map → chunk-2FYUM6TA.js.map} +0 -0
  43. /package/dist/esm/{chunk-6HEORZNJ.js.map → chunk-4LV37PHM.js.map} +0 -0
  44. /package/dist/esm/{chunk-H73AMXCH.js.map → chunk-AS2STDGA.js.map} +0 -0
  45. /package/dist/esm/{chunk-25ZRMILM.js.map → chunk-JTMLFTNZ.js.map} +0 -0
package/tokens/base.css CHANGED
@@ -1354,38 +1354,65 @@
1354
1354
  --radius-row-2: var(--radius-control-2);
1355
1355
  --radius-row-3: var(--radius-control-3);
1356
1356
  --radius-row-4: var(--radius-control-4);
1357
- --radius-surface-1: calc(8px * var(--scale) * var(--radius-surface-factor));
1358
- --radius-surface-2: calc(12px * var(--scale) * var(--radius-surface-factor));
1359
- --radius-surface-3: calc(16px * var(--scale) * var(--radius-surface-factor));
1360
- --radius-surface-4: calc(20px * var(--scale) * var(--radius-surface-factor));
1361
- --radius-overlay-1: calc(12px * var(--scale) * var(--radius-surface-factor));
1362
- --radius-overlay-2: calc(16px * var(--scale) * var(--radius-surface-factor));
1363
- --radius-overlay-3: calc(20px * var(--scale) * var(--radius-surface-factor));
1364
- --radius-overlay-4: calc(24px * var(--scale) * var(--radius-surface-factor));
1357
+ --radius-panel-1: calc(var(--radius-row-1) + var(--panel-p-1));
1358
+ --radius-panel-2: calc(var(--radius-row-2) + var(--panel-p-2));
1359
+ --radius-panel-3: calc(var(--radius-row-3) + var(--panel-p-3));
1360
+ --radius-panel-4: calc(var(--radius-row-4) + var(--panel-p-4));
1361
+ --radius-surface-1: calc(16px * var(--scale));
1362
+ --radius-surface-2: calc(20px * var(--scale));
1363
+ --radius-surface-3: calc(24px * var(--scale));
1364
+ --radius-surface-4: calc(28px * var(--scale));
1365
+ --radius-overlay-1: calc(20px * var(--scale));
1366
+ --radius-overlay-2: calc(24px * var(--scale));
1367
+ --radius-overlay-3: calc(28px * var(--scale));
1368
+ --radius-overlay-4: calc(32px * var(--scale));
1365
1369
  }
1366
1370
  [data-radius='none'] {
1367
1371
  --radius-factor: 0;
1368
- --radius-surface-factor: 0;
1369
1372
  --radius-full: 0px;
1373
+ --radius-panel-1: 0px;
1374
+ --radius-panel-2: 0px;
1375
+ --radius-panel-3: 0px;
1376
+ --radius-panel-4: 0px;
1377
+ --radius-surface-1: 0px;
1378
+ --radius-surface-2: 0px;
1379
+ --radius-surface-3: 0px;
1380
+ --radius-surface-4: 0px;
1381
+ --radius-overlay-1: 0px;
1382
+ --radius-overlay-2: 0px;
1383
+ --radius-overlay-3: 0px;
1384
+ --radius-overlay-4: 0px;
1370
1385
  }
1371
1386
  [data-radius='small'] {
1372
1387
  --radius-factor: 0.75;
1373
- --radius-surface-factor: 0.5;
1374
1388
  --radius-full: 0px;
1389
+ --radius-surface-1: calc(5px * var(--scale));
1390
+ --radius-surface-2: calc(6px * var(--scale));
1391
+ --radius-surface-3: calc(8px * var(--scale));
1392
+ --radius-surface-4: calc(10px * var(--scale));
1393
+ --radius-overlay-1: calc(6px * var(--scale));
1394
+ --radius-overlay-2: calc(8px * var(--scale));
1395
+ --radius-overlay-3: calc(10px * var(--scale));
1396
+ --radius-overlay-4: calc(12px * var(--scale));
1375
1397
  }
1376
1398
  [data-radius='medium'] {
1377
1399
  --radius-factor: 1;
1378
- --radius-surface-factor: 0.75;
1379
1400
  --radius-full: 0px;
1401
+ --radius-surface-1: calc(12px * var(--scale));
1402
+ --radius-surface-2: calc(18px * var(--scale));
1403
+ --radius-surface-3: calc(24px * var(--scale));
1404
+ --radius-surface-4: calc(30px * var(--scale));
1405
+ --radius-overlay-1: calc(18px * var(--scale));
1406
+ --radius-overlay-2: calc(24px * var(--scale));
1407
+ --radius-overlay-3: calc(30px * var(--scale));
1408
+ --radius-overlay-4: calc(36px * var(--scale));
1380
1409
  }
1381
1410
  [data-radius='large'] {
1382
1411
  --radius-factor: 1.5;
1383
- --radius-surface-factor: 0.9;
1384
1412
  --radius-full: 0px;
1385
1413
  }
1386
1414
  [data-radius='full'] {
1387
1415
  --radius-factor: 2;
1388
- --radius-surface-factor: 1;
1389
1416
  --radius-full: 9999px;
1390
1417
  --radius-control-1: calc(var(--control-height-1) / 2);
1391
1418
  --radius-control-2: calc(var(--control-height-2) / 2);
@@ -1401,28 +1428,28 @@
1401
1428
  --kui-sf-p: var(--surface-p-1);
1402
1429
  }
1403
1430
  .kui-SurfaceNest:where(.kui-r-size-1) > * {
1404
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
1431
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
1405
1432
  }
1406
1433
  .kui-SurfaceNest:where(.kui-r-size-2) {
1407
1434
  --kui-sf-radius: var(--radius-surface-2);
1408
1435
  --kui-sf-p: var(--surface-p-2);
1409
1436
  }
1410
1437
  .kui-SurfaceNest:where(.kui-r-size-2) > * {
1411
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
1438
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
1412
1439
  }
1413
1440
  .kui-SurfaceNest:where(.kui-r-size-3) {
1414
1441
  --kui-sf-radius: var(--radius-surface-3);
1415
1442
  --kui-sf-p: var(--surface-p-3);
1416
1443
  }
1417
1444
  .kui-SurfaceNest:where(.kui-r-size-3) > * {
1418
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
1445
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
1419
1446
  }
1420
1447
  .kui-SurfaceNest:where(.kui-r-size-4) {
1421
1448
  --kui-sf-radius: var(--radius-surface-4);
1422
1449
  --kui-sf-p: var(--surface-p-4);
1423
1450
  }
1424
1451
  .kui-SurfaceNest:where(.kui-r-size-4) > * {
1425
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
1452
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
1426
1453
  }
1427
1454
  @media (min-width: 520px) {
1428
1455
  .kui-SurfaceNest:where(.xs\:kui-r-size-1) {
@@ -1430,28 +1457,28 @@
1430
1457
  --kui-sf-p: var(--surface-p-1);
1431
1458
  }
1432
1459
  .kui-SurfaceNest:where(.xs\:kui-r-size-1) > * {
1433
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
1460
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
1434
1461
  }
1435
1462
  .kui-SurfaceNest:where(.xs\:kui-r-size-2) {
1436
1463
  --kui-sf-radius: var(--radius-surface-2);
1437
1464
  --kui-sf-p: var(--surface-p-2);
1438
1465
  }
1439
1466
  .kui-SurfaceNest:where(.xs\:kui-r-size-2) > * {
1440
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
1467
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
1441
1468
  }
1442
1469
  .kui-SurfaceNest:where(.xs\:kui-r-size-3) {
1443
1470
  --kui-sf-radius: var(--radius-surface-3);
1444
1471
  --kui-sf-p: var(--surface-p-3);
1445
1472
  }
1446
1473
  .kui-SurfaceNest:where(.xs\:kui-r-size-3) > * {
1447
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
1474
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
1448
1475
  }
1449
1476
  .kui-SurfaceNest:where(.xs\:kui-r-size-4) {
1450
1477
  --kui-sf-radius: var(--radius-surface-4);
1451
1478
  --kui-sf-p: var(--surface-p-4);
1452
1479
  }
1453
1480
  .kui-SurfaceNest:where(.xs\:kui-r-size-4) > * {
1454
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
1481
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
1455
1482
  }
1456
1483
  }
1457
1484
  @media (min-width: 768px) {
@@ -1460,28 +1487,28 @@
1460
1487
  --kui-sf-p: var(--surface-p-1);
1461
1488
  }
1462
1489
  .kui-SurfaceNest:where(.sm\:kui-r-size-1) > * {
1463
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
1490
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
1464
1491
  }
1465
1492
  .kui-SurfaceNest:where(.sm\:kui-r-size-2) {
1466
1493
  --kui-sf-radius: var(--radius-surface-2);
1467
1494
  --kui-sf-p: var(--surface-p-2);
1468
1495
  }
1469
1496
  .kui-SurfaceNest:where(.sm\:kui-r-size-2) > * {
1470
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
1497
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
1471
1498
  }
1472
1499
  .kui-SurfaceNest:where(.sm\:kui-r-size-3) {
1473
1500
  --kui-sf-radius: var(--radius-surface-3);
1474
1501
  --kui-sf-p: var(--surface-p-3);
1475
1502
  }
1476
1503
  .kui-SurfaceNest:where(.sm\:kui-r-size-3) > * {
1477
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
1504
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
1478
1505
  }
1479
1506
  .kui-SurfaceNest:where(.sm\:kui-r-size-4) {
1480
1507
  --kui-sf-radius: var(--radius-surface-4);
1481
1508
  --kui-sf-p: var(--surface-p-4);
1482
1509
  }
1483
1510
  .kui-SurfaceNest:where(.sm\:kui-r-size-4) > * {
1484
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
1511
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
1485
1512
  }
1486
1513
  }
1487
1514
  @media (min-width: 1024px) {
@@ -1490,28 +1517,28 @@
1490
1517
  --kui-sf-p: var(--surface-p-1);
1491
1518
  }
1492
1519
  .kui-SurfaceNest:where(.md\:kui-r-size-1) > * {
1493
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
1520
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
1494
1521
  }
1495
1522
  .kui-SurfaceNest:where(.md\:kui-r-size-2) {
1496
1523
  --kui-sf-radius: var(--radius-surface-2);
1497
1524
  --kui-sf-p: var(--surface-p-2);
1498
1525
  }
1499
1526
  .kui-SurfaceNest:where(.md\:kui-r-size-2) > * {
1500
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
1527
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
1501
1528
  }
1502
1529
  .kui-SurfaceNest:where(.md\:kui-r-size-3) {
1503
1530
  --kui-sf-radius: var(--radius-surface-3);
1504
1531
  --kui-sf-p: var(--surface-p-3);
1505
1532
  }
1506
1533
  .kui-SurfaceNest:where(.md\:kui-r-size-3) > * {
1507
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
1534
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
1508
1535
  }
1509
1536
  .kui-SurfaceNest:where(.md\:kui-r-size-4) {
1510
1537
  --kui-sf-radius: var(--radius-surface-4);
1511
1538
  --kui-sf-p: var(--surface-p-4);
1512
1539
  }
1513
1540
  .kui-SurfaceNest:where(.md\:kui-r-size-4) > * {
1514
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
1541
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
1515
1542
  }
1516
1543
  }
1517
1544
  @media (min-width: 1280px) {
@@ -1520,28 +1547,28 @@
1520
1547
  --kui-sf-p: var(--surface-p-1);
1521
1548
  }
1522
1549
  .kui-SurfaceNest:where(.lg\:kui-r-size-1) > * {
1523
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
1550
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
1524
1551
  }
1525
1552
  .kui-SurfaceNest:where(.lg\:kui-r-size-2) {
1526
1553
  --kui-sf-radius: var(--radius-surface-2);
1527
1554
  --kui-sf-p: var(--surface-p-2);
1528
1555
  }
1529
1556
  .kui-SurfaceNest:where(.lg\:kui-r-size-2) > * {
1530
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
1557
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
1531
1558
  }
1532
1559
  .kui-SurfaceNest:where(.lg\:kui-r-size-3) {
1533
1560
  --kui-sf-radius: var(--radius-surface-3);
1534
1561
  --kui-sf-p: var(--surface-p-3);
1535
1562
  }
1536
1563
  .kui-SurfaceNest:where(.lg\:kui-r-size-3) > * {
1537
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
1564
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
1538
1565
  }
1539
1566
  .kui-SurfaceNest:where(.lg\:kui-r-size-4) {
1540
1567
  --kui-sf-radius: var(--radius-surface-4);
1541
1568
  --kui-sf-p: var(--surface-p-4);
1542
1569
  }
1543
1570
  .kui-SurfaceNest:where(.lg\:kui-r-size-4) > * {
1544
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
1571
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
1545
1572
  }
1546
1573
  }
1547
1574
  @media (min-width: 1640px) {
@@ -1550,28 +1577,28 @@
1550
1577
  --kui-sf-p: var(--surface-p-1);
1551
1578
  }
1552
1579
  .kui-SurfaceNest:where(.xl\:kui-r-size-1) > * {
1553
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
1580
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
1554
1581
  }
1555
1582
  .kui-SurfaceNest:where(.xl\:kui-r-size-2) {
1556
1583
  --kui-sf-radius: var(--radius-surface-2);
1557
1584
  --kui-sf-p: var(--surface-p-2);
1558
1585
  }
1559
1586
  .kui-SurfaceNest:where(.xl\:kui-r-size-2) > * {
1560
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
1587
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
1561
1588
  }
1562
1589
  .kui-SurfaceNest:where(.xl\:kui-r-size-3) {
1563
1590
  --kui-sf-radius: var(--radius-surface-3);
1564
1591
  --kui-sf-p: var(--surface-p-3);
1565
1592
  }
1566
1593
  .kui-SurfaceNest:where(.xl\:kui-r-size-3) > * {
1567
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
1594
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
1568
1595
  }
1569
1596
  .kui-SurfaceNest:where(.xl\:kui-r-size-4) {
1570
1597
  --kui-sf-radius: var(--radius-surface-4);
1571
1598
  --kui-sf-p: var(--surface-p-4);
1572
1599
  }
1573
1600
  .kui-SurfaceNest:where(.xl\:kui-r-size-4) > * {
1574
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
1601
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
1575
1602
  }
1576
1603
  }
1577
1604
  .kui-SurfaceNest {
package/tokens.css CHANGED
@@ -4700,38 +4700,65 @@
4700
4700
  --radius-row-2: var(--radius-control-2);
4701
4701
  --radius-row-3: var(--radius-control-3);
4702
4702
  --radius-row-4: var(--radius-control-4);
4703
- --radius-surface-1: calc(8px * var(--scale) * var(--radius-surface-factor));
4704
- --radius-surface-2: calc(12px * var(--scale) * var(--radius-surface-factor));
4705
- --radius-surface-3: calc(16px * var(--scale) * var(--radius-surface-factor));
4706
- --radius-surface-4: calc(20px * var(--scale) * var(--radius-surface-factor));
4707
- --radius-overlay-1: calc(12px * var(--scale) * var(--radius-surface-factor));
4708
- --radius-overlay-2: calc(16px * var(--scale) * var(--radius-surface-factor));
4709
- --radius-overlay-3: calc(20px * var(--scale) * var(--radius-surface-factor));
4710
- --radius-overlay-4: calc(24px * var(--scale) * var(--radius-surface-factor));
4703
+ --radius-panel-1: calc(var(--radius-row-1) + var(--panel-p-1));
4704
+ --radius-panel-2: calc(var(--radius-row-2) + var(--panel-p-2));
4705
+ --radius-panel-3: calc(var(--radius-row-3) + var(--panel-p-3));
4706
+ --radius-panel-4: calc(var(--radius-row-4) + var(--panel-p-4));
4707
+ --radius-surface-1: calc(16px * var(--scale));
4708
+ --radius-surface-2: calc(20px * var(--scale));
4709
+ --radius-surface-3: calc(24px * var(--scale));
4710
+ --radius-surface-4: calc(28px * var(--scale));
4711
+ --radius-overlay-1: calc(20px * var(--scale));
4712
+ --radius-overlay-2: calc(24px * var(--scale));
4713
+ --radius-overlay-3: calc(28px * var(--scale));
4714
+ --radius-overlay-4: calc(32px * var(--scale));
4711
4715
  }
4712
4716
  [data-radius='none'] {
4713
4717
  --radius-factor: 0;
4714
- --radius-surface-factor: 0;
4715
4718
  --radius-full: 0px;
4719
+ --radius-panel-1: 0px;
4720
+ --radius-panel-2: 0px;
4721
+ --radius-panel-3: 0px;
4722
+ --radius-panel-4: 0px;
4723
+ --radius-surface-1: 0px;
4724
+ --radius-surface-2: 0px;
4725
+ --radius-surface-3: 0px;
4726
+ --radius-surface-4: 0px;
4727
+ --radius-overlay-1: 0px;
4728
+ --radius-overlay-2: 0px;
4729
+ --radius-overlay-3: 0px;
4730
+ --radius-overlay-4: 0px;
4716
4731
  }
4717
4732
  [data-radius='small'] {
4718
4733
  --radius-factor: 0.75;
4719
- --radius-surface-factor: 0.5;
4720
4734
  --radius-full: 0px;
4735
+ --radius-surface-1: calc(5px * var(--scale));
4736
+ --radius-surface-2: calc(6px * var(--scale));
4737
+ --radius-surface-3: calc(8px * var(--scale));
4738
+ --radius-surface-4: calc(10px * var(--scale));
4739
+ --radius-overlay-1: calc(6px * var(--scale));
4740
+ --radius-overlay-2: calc(8px * var(--scale));
4741
+ --radius-overlay-3: calc(10px * var(--scale));
4742
+ --radius-overlay-4: calc(12px * var(--scale));
4721
4743
  }
4722
4744
  [data-radius='medium'] {
4723
4745
  --radius-factor: 1;
4724
- --radius-surface-factor: 0.75;
4725
4746
  --radius-full: 0px;
4747
+ --radius-surface-1: calc(12px * var(--scale));
4748
+ --radius-surface-2: calc(18px * var(--scale));
4749
+ --radius-surface-3: calc(24px * var(--scale));
4750
+ --radius-surface-4: calc(30px * var(--scale));
4751
+ --radius-overlay-1: calc(18px * var(--scale));
4752
+ --radius-overlay-2: calc(24px * var(--scale));
4753
+ --radius-overlay-3: calc(30px * var(--scale));
4754
+ --radius-overlay-4: calc(36px * var(--scale));
4726
4755
  }
4727
4756
  [data-radius='large'] {
4728
4757
  --radius-factor: 1.5;
4729
- --radius-surface-factor: 0.9;
4730
4758
  --radius-full: 0px;
4731
4759
  }
4732
4760
  [data-radius='full'] {
4733
4761
  --radius-factor: 2;
4734
- --radius-surface-factor: 1;
4735
4762
  --radius-full: 9999px;
4736
4763
  --radius-control-1: calc(var(--control-height-1) / 2);
4737
4764
  --radius-control-2: calc(var(--control-height-2) / 2);
@@ -4747,28 +4774,28 @@
4747
4774
  --kui-sf-p: var(--surface-p-1);
4748
4775
  }
4749
4776
  .kui-SurfaceNest:where(.kui-r-size-1) > * {
4750
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
4777
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
4751
4778
  }
4752
4779
  .kui-SurfaceNest:where(.kui-r-size-2) {
4753
4780
  --kui-sf-radius: var(--radius-surface-2);
4754
4781
  --kui-sf-p: var(--surface-p-2);
4755
4782
  }
4756
4783
  .kui-SurfaceNest:where(.kui-r-size-2) > * {
4757
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
4784
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
4758
4785
  }
4759
4786
  .kui-SurfaceNest:where(.kui-r-size-3) {
4760
4787
  --kui-sf-radius: var(--radius-surface-3);
4761
4788
  --kui-sf-p: var(--surface-p-3);
4762
4789
  }
4763
4790
  .kui-SurfaceNest:where(.kui-r-size-3) > * {
4764
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
4791
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
4765
4792
  }
4766
4793
  .kui-SurfaceNest:where(.kui-r-size-4) {
4767
4794
  --kui-sf-radius: var(--radius-surface-4);
4768
4795
  --kui-sf-p: var(--surface-p-4);
4769
4796
  }
4770
4797
  .kui-SurfaceNest:where(.kui-r-size-4) > * {
4771
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
4798
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
4772
4799
  }
4773
4800
  @media (min-width: 520px) {
4774
4801
  .kui-SurfaceNest:where(.xs\:kui-r-size-1) {
@@ -4776,28 +4803,28 @@
4776
4803
  --kui-sf-p: var(--surface-p-1);
4777
4804
  }
4778
4805
  .kui-SurfaceNest:where(.xs\:kui-r-size-1) > * {
4779
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
4806
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
4780
4807
  }
4781
4808
  .kui-SurfaceNest:where(.xs\:kui-r-size-2) {
4782
4809
  --kui-sf-radius: var(--radius-surface-2);
4783
4810
  --kui-sf-p: var(--surface-p-2);
4784
4811
  }
4785
4812
  .kui-SurfaceNest:where(.xs\:kui-r-size-2) > * {
4786
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
4813
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
4787
4814
  }
4788
4815
  .kui-SurfaceNest:where(.xs\:kui-r-size-3) {
4789
4816
  --kui-sf-radius: var(--radius-surface-3);
4790
4817
  --kui-sf-p: var(--surface-p-3);
4791
4818
  }
4792
4819
  .kui-SurfaceNest:where(.xs\:kui-r-size-3) > * {
4793
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
4820
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
4794
4821
  }
4795
4822
  .kui-SurfaceNest:where(.xs\:kui-r-size-4) {
4796
4823
  --kui-sf-radius: var(--radius-surface-4);
4797
4824
  --kui-sf-p: var(--surface-p-4);
4798
4825
  }
4799
4826
  .kui-SurfaceNest:where(.xs\:kui-r-size-4) > * {
4800
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
4827
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
4801
4828
  }
4802
4829
  }
4803
4830
  @media (min-width: 768px) {
@@ -4806,28 +4833,28 @@
4806
4833
  --kui-sf-p: var(--surface-p-1);
4807
4834
  }
4808
4835
  .kui-SurfaceNest:where(.sm\:kui-r-size-1) > * {
4809
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
4836
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
4810
4837
  }
4811
4838
  .kui-SurfaceNest:where(.sm\:kui-r-size-2) {
4812
4839
  --kui-sf-radius: var(--radius-surface-2);
4813
4840
  --kui-sf-p: var(--surface-p-2);
4814
4841
  }
4815
4842
  .kui-SurfaceNest:where(.sm\:kui-r-size-2) > * {
4816
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
4843
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
4817
4844
  }
4818
4845
  .kui-SurfaceNest:where(.sm\:kui-r-size-3) {
4819
4846
  --kui-sf-radius: var(--radius-surface-3);
4820
4847
  --kui-sf-p: var(--surface-p-3);
4821
4848
  }
4822
4849
  .kui-SurfaceNest:where(.sm\:kui-r-size-3) > * {
4823
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
4850
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
4824
4851
  }
4825
4852
  .kui-SurfaceNest:where(.sm\:kui-r-size-4) {
4826
4853
  --kui-sf-radius: var(--radius-surface-4);
4827
4854
  --kui-sf-p: var(--surface-p-4);
4828
4855
  }
4829
4856
  .kui-SurfaceNest:where(.sm\:kui-r-size-4) > * {
4830
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
4857
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
4831
4858
  }
4832
4859
  }
4833
4860
  @media (min-width: 1024px) {
@@ -4836,28 +4863,28 @@
4836
4863
  --kui-sf-p: var(--surface-p-1);
4837
4864
  }
4838
4865
  .kui-SurfaceNest:where(.md\:kui-r-size-1) > * {
4839
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
4866
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
4840
4867
  }
4841
4868
  .kui-SurfaceNest:where(.md\:kui-r-size-2) {
4842
4869
  --kui-sf-radius: var(--radius-surface-2);
4843
4870
  --kui-sf-p: var(--surface-p-2);
4844
4871
  }
4845
4872
  .kui-SurfaceNest:where(.md\:kui-r-size-2) > * {
4846
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
4873
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
4847
4874
  }
4848
4875
  .kui-SurfaceNest:where(.md\:kui-r-size-3) {
4849
4876
  --kui-sf-radius: var(--radius-surface-3);
4850
4877
  --kui-sf-p: var(--surface-p-3);
4851
4878
  }
4852
4879
  .kui-SurfaceNest:where(.md\:kui-r-size-3) > * {
4853
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
4880
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
4854
4881
  }
4855
4882
  .kui-SurfaceNest:where(.md\:kui-r-size-4) {
4856
4883
  --kui-sf-radius: var(--radius-surface-4);
4857
4884
  --kui-sf-p: var(--surface-p-4);
4858
4885
  }
4859
4886
  .kui-SurfaceNest:where(.md\:kui-r-size-4) > * {
4860
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
4887
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
4861
4888
  }
4862
4889
  }
4863
4890
  @media (min-width: 1280px) {
@@ -4866,28 +4893,28 @@
4866
4893
  --kui-sf-p: var(--surface-p-1);
4867
4894
  }
4868
4895
  .kui-SurfaceNest:where(.lg\:kui-r-size-1) > * {
4869
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
4896
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
4870
4897
  }
4871
4898
  .kui-SurfaceNest:where(.lg\:kui-r-size-2) {
4872
4899
  --kui-sf-radius: var(--radius-surface-2);
4873
4900
  --kui-sf-p: var(--surface-p-2);
4874
4901
  }
4875
4902
  .kui-SurfaceNest:where(.lg\:kui-r-size-2) > * {
4876
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
4903
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
4877
4904
  }
4878
4905
  .kui-SurfaceNest:where(.lg\:kui-r-size-3) {
4879
4906
  --kui-sf-radius: var(--radius-surface-3);
4880
4907
  --kui-sf-p: var(--surface-p-3);
4881
4908
  }
4882
4909
  .kui-SurfaceNest:where(.lg\:kui-r-size-3) > * {
4883
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
4910
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
4884
4911
  }
4885
4912
  .kui-SurfaceNest:where(.lg\:kui-r-size-4) {
4886
4913
  --kui-sf-radius: var(--radius-surface-4);
4887
4914
  --kui-sf-p: var(--surface-p-4);
4888
4915
  }
4889
4916
  .kui-SurfaceNest:where(.lg\:kui-r-size-4) > * {
4890
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
4917
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
4891
4918
  }
4892
4919
  }
4893
4920
  @media (min-width: 1640px) {
@@ -4896,28 +4923,28 @@
4896
4923
  --kui-sf-p: var(--surface-p-1);
4897
4924
  }
4898
4925
  .kui-SurfaceNest:where(.xl\:kui-r-size-1) > * {
4899
- --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
4926
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-1) - var(--surface-p-1)));
4900
4927
  }
4901
4928
  .kui-SurfaceNest:where(.xl\:kui-r-size-2) {
4902
4929
  --kui-sf-radius: var(--radius-surface-2);
4903
4930
  --kui-sf-p: var(--surface-p-2);
4904
4931
  }
4905
4932
  .kui-SurfaceNest:where(.xl\:kui-r-size-2) > * {
4906
- --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
4933
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-2) - var(--surface-p-2)));
4907
4934
  }
4908
4935
  .kui-SurfaceNest:where(.xl\:kui-r-size-3) {
4909
4936
  --kui-sf-radius: var(--radius-surface-3);
4910
4937
  --kui-sf-p: var(--surface-p-3);
4911
4938
  }
4912
4939
  .kui-SurfaceNest:where(.xl\:kui-r-size-3) > * {
4913
- --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
4940
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-3) - var(--surface-p-3)));
4914
4941
  }
4915
4942
  .kui-SurfaceNest:where(.xl\:kui-r-size-4) {
4916
4943
  --kui-sf-radius: var(--radius-surface-4);
4917
4944
  --kui-sf-p: var(--surface-p-4);
4918
4945
  }
4919
4946
  .kui-SurfaceNest:where(.xl\:kui-r-size-4) > * {
4920
- --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
4947
+ --kui-nest: max(calc(8px * var(--scale)), calc(var(--radius-surface-4) - var(--surface-p-4)));
4921
4948
  }
4922
4949
  }
4923
4950
  .kui-SurfaceNest {
package/dist/esm/chunk-TSWHVZ47.js DELETED
@@ -1,3 +0,0 @@
1
- "use client";
2
- import{a as d}from"./chunk-MGWGD6KI.js";import{b as C}from"./chunk-QEDKL23P.js";import{a as s}from"./chunk-ANQLWGFN.js";import{j as m}from"./chunk-GHWEXMF6.js";import*as e from"react";import c from"classnames";var v=e.createContext(null);function u(){return e.useContext(v)}var S=e.createContext("2"),k=e.createContext(!1),B=e.createContext(!1);function T({children:t,presentation:n}){let o=e.useContext(S),a=e.useMemo(()=>({size:o,menuVariant:"soft",presentation:n}),[o,n]);return e.createElement(v.Provider,{value:a},t)}function P(){let t=u(),n=e.useContext(S),o=t?.size??n,a=t?.menuVariant??"soft";return["kui-ShellPaneChrome",`kui-r-size-${o}`,`kui-menu-variant-${a}`]}var N={1:"2",2:"3",3:"4",4:"4"};function f(){let t=u(),n=e.useContext(S);return N[t?.size??n]}function W(){let t=e.useContext(s),n=e.useContext(m)!==null,o=f();return t!==void 0?t:n?o:null}var H=e.forwardRef(({className:t,float:n,children:o,...a},i)=>{let r=P(),l=f();return e.createElement("div",{...a,ref:i,"data-float":n||void 0,className:c("kui-ShellPaneHeader","kui-SidebarHeader","kui-SidebarHeader--container",...r,t)},e.createElement(s.Provider,{value:l},o))});H.displayName="Shell.PaneHeader";var y=e.forwardRef(({className:t,float:n,children:o,...a},i)=>{let r=P(),l=f();return e.createElement("div",{...a,ref:i,"data-float":n||void 0,className:c("kui-ShellPaneFooter","kui-SidebarFooter","kui-SidebarFooter--container",...r,t)},e.createElement(s.Provider,{value:l},o))});y.displayName="Shell.PaneFooter";var F=e.forwardRef(({className:t,style:n,dir:o,children:a,fade:i=!1,...r},l)=>{let x=P(),p=e.useContext(k),h=u(),R=p&&h===null,z=e.useContext(B),b=C();if(R){let V=r.tabIndex??(z&&b?-1:void 0);return e.createElement(d,{...r,tabIndex:V,ref:l,type:"hover",fade:i,className:"kui-ShellScroll"},e.createElement("div",{style:n,dir:o,className:c("kui-ShellScrollContent",t)},a))}return e.createElement(d,{...r,ref:l,type:"hover",fade:i,className:"kui-ShellScroll"},e.createElement("div",{style:n,dir:o,className:c("kui-BaseMenuContent","kui-SidebarContent",...x,t)},e.createElement(s.Provider,{value:null},e.createElement("div",{className:"kui-BaseMenuViewport"},a))))});F.displayName="Shell.Scroll";export{v as a,u as b,S as c,k as d,B as e,T as f,N as g,W as h,H as i,y as j,F as k};
3
- //# sourceMappingURL=chunk-TSWHVZ47.js.map