@kushagradhawan/kookie-ui 0.1.32 → 0.1.34

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 (120) hide show
  1. package/components.css +937 -458
  2. package/dist/cjs/components/_internal/base-button.d.ts.map +1 -1
  3. package/dist/cjs/components/_internal/base-button.js +1 -1
  4. package/dist/cjs/components/_internal/base-button.js.map +3 -3
  5. package/dist/cjs/components/chatbar.d.ts +202 -0
  6. package/dist/cjs/components/chatbar.d.ts.map +1 -0
  7. package/dist/cjs/components/chatbar.js +2 -0
  8. package/dist/cjs/components/chatbar.js.map +7 -0
  9. package/dist/cjs/components/icon-button.d.ts.map +1 -1
  10. package/dist/cjs/components/icon-button.js +2 -2
  11. package/dist/cjs/components/icon-button.js.map +3 -3
  12. package/dist/cjs/components/icons.d.ts +6 -1
  13. package/dist/cjs/components/icons.d.ts.map +1 -1
  14. package/dist/cjs/components/icons.js +1 -1
  15. package/dist/cjs/components/icons.js.map +3 -3
  16. package/dist/cjs/components/index.d.ts +3 -0
  17. package/dist/cjs/components/index.d.ts.map +1 -1
  18. package/dist/cjs/components/index.js +1 -1
  19. package/dist/cjs/components/index.js.map +3 -3
  20. package/dist/cjs/components/popover.d.ts +13 -1
  21. package/dist/cjs/components/popover.d.ts.map +1 -1
  22. package/dist/cjs/components/popover.js +1 -1
  23. package/dist/cjs/components/popover.js.map +3 -3
  24. package/dist/cjs/components/sheet.d.ts +82 -0
  25. package/dist/cjs/components/sheet.d.ts.map +1 -0
  26. package/dist/cjs/components/sheet.js +2 -0
  27. package/dist/cjs/components/sheet.js.map +7 -0
  28. package/dist/cjs/components/shell.d.ts +180 -0
  29. package/dist/cjs/components/shell.d.ts.map +1 -0
  30. package/dist/cjs/components/shell.js +2 -0
  31. package/dist/cjs/components/shell.js.map +7 -0
  32. package/dist/cjs/components/sidebar.d.ts +4 -33
  33. package/dist/cjs/components/sidebar.d.ts.map +1 -1
  34. package/dist/cjs/components/sidebar.js +1 -1
  35. package/dist/cjs/components/sidebar.js.map +3 -3
  36. package/dist/cjs/components/skeleton.d.ts.map +1 -1
  37. package/dist/cjs/components/skeleton.js +1 -1
  38. package/dist/cjs/components/skeleton.js.map +2 -2
  39. package/dist/cjs/helpers/inert.d.ts +1 -1
  40. package/dist/cjs/helpers/inert.d.ts.map +1 -1
  41. package/dist/cjs/helpers/inert.js +1 -1
  42. package/dist/cjs/helpers/inert.js.map +2 -2
  43. package/dist/esm/components/_internal/base-button.d.ts.map +1 -1
  44. package/dist/esm/components/_internal/base-button.js +1 -1
  45. package/dist/esm/components/_internal/base-button.js.map +3 -3
  46. package/dist/esm/components/chatbar.d.ts +202 -0
  47. package/dist/esm/components/chatbar.d.ts.map +1 -0
  48. package/dist/esm/components/chatbar.js +2 -0
  49. package/dist/esm/components/chatbar.js.map +7 -0
  50. package/dist/esm/components/icon-button.d.ts.map +1 -1
  51. package/dist/esm/components/icon-button.js +2 -2
  52. package/dist/esm/components/icon-button.js.map +3 -3
  53. package/dist/esm/components/icons.d.ts +6 -1
  54. package/dist/esm/components/icons.d.ts.map +1 -1
  55. package/dist/esm/components/icons.js +1 -1
  56. package/dist/esm/components/icons.js.map +3 -3
  57. package/dist/esm/components/index.d.ts +3 -0
  58. package/dist/esm/components/index.d.ts.map +1 -1
  59. package/dist/esm/components/index.js +1 -1
  60. package/dist/esm/components/index.js.map +3 -3
  61. package/dist/esm/components/popover.d.ts +13 -1
  62. package/dist/esm/components/popover.d.ts.map +1 -1
  63. package/dist/esm/components/popover.js +1 -1
  64. package/dist/esm/components/popover.js.map +3 -3
  65. package/dist/esm/components/sheet.d.ts +82 -0
  66. package/dist/esm/components/sheet.d.ts.map +1 -0
  67. package/dist/esm/components/sheet.js +2 -0
  68. package/dist/esm/components/sheet.js.map +7 -0
  69. package/dist/esm/components/shell.d.ts +180 -0
  70. package/dist/esm/components/shell.d.ts.map +1 -0
  71. package/dist/esm/components/shell.js +2 -0
  72. package/dist/esm/components/shell.js.map +7 -0
  73. package/dist/esm/components/sidebar.d.ts +4 -33
  74. package/dist/esm/components/sidebar.d.ts.map +1 -1
  75. package/dist/esm/components/sidebar.js +1 -1
  76. package/dist/esm/components/sidebar.js.map +3 -3
  77. package/dist/esm/components/skeleton.d.ts.map +1 -1
  78. package/dist/esm/components/skeleton.js.map +2 -2
  79. package/dist/esm/helpers/inert.d.ts +1 -1
  80. package/dist/esm/helpers/inert.d.ts.map +1 -1
  81. package/dist/esm/helpers/inert.js +1 -1
  82. package/dist/esm/helpers/inert.js.map +2 -2
  83. package/package.json +2 -1
  84. package/src/components/_internal/base-button.tsx +8 -0
  85. package/src/components/_internal/base-card.css +18 -18
  86. package/src/components/_internal/base-dialog.css +11 -49
  87. package/src/components/_internal/base-menu.css +2 -2
  88. package/src/components/_internal/base-sidebar-menu.css +3 -3
  89. package/src/components/accordion.css +6 -6
  90. package/src/components/animations.css +65 -81
  91. package/src/components/callout.css +3 -3
  92. package/src/components/chatbar.css +214 -0
  93. package/src/components/chatbar.tsx +1181 -0
  94. package/src/components/icon-button.tsx +11 -0
  95. package/src/components/icons.tsx +97 -2
  96. package/src/components/image.css +3 -3
  97. package/src/components/index.css +3 -0
  98. package/src/components/index.tsx +3 -0
  99. package/src/components/popover.css +53 -8
  100. package/src/components/popover.tsx +180 -2
  101. package/src/components/scroll-area.css +3 -3
  102. package/src/components/segmented-control.css +3 -3
  103. package/src/components/sheet.css +90 -0
  104. package/src/components/sheet.tsx +247 -0
  105. package/src/components/shell.css +137 -0
  106. package/src/components/shell.tsx +1032 -0
  107. package/src/components/sidebar.css +55 -268
  108. package/src/components/sidebar.tsx +40 -262
  109. package/src/components/skeleton.tsx +1 -2
  110. package/src/components/text-area.css +6 -5
  111. package/src/components/tooltip.css +2 -2
  112. package/src/helpers/inert.ts +3 -3
  113. package/src/styles/tokens/constants.css +6 -3
  114. package/src/styles/tokens/index.css +1 -0
  115. package/src/styles/tokens/radius.css +7 -2
  116. package/src/styles/tokens/space.css +6 -0
  117. package/src/styles/tokens/transition.css +91 -46
  118. package/styles.css +998 -496
  119. package/tokens/base.css +57 -35
  120. package/tokens.css +61 -38
package/tokens/base.css CHANGED
@@ -1126,42 +1126,64 @@
1126
1126
  --duration-3: 100ms;
1127
1127
  --duration-4: 150ms;
1128
1128
  --duration-5: 200ms;
1129
- --duration-spring-1: 200ms;
1130
- --duration-spring-2: 250ms;
1131
- --duration-spring-3: 300ms;
1132
- --ease-1: ease-out;
1133
- --ease-2: ease-in-out;
1134
- --ease-3: cubic-bezier(0.4, 0, 0.2, 1);
1135
- --ease-4: cubic-bezier(0.25, 0.46, 0.45, 0.94);
1136
- --ease-5: cubic-bezier(0.68, -0.55, 0.265, 1.55);
1129
+ --duration-spring-1: 100ms;
1130
+ --duration-spring-2: 150ms;
1131
+ --duration-spring-3: 200ms;
1132
+ --ease-1: var(--ease-spring-1);
1133
+ --ease-2: var(--ease-spring-2);
1134
+ --ease-3: var(--ease-spring-3);
1135
+ --ease-4: var(--ease-spring-1);
1136
+ --ease-5: var(--ease-spring-2);
1137
1137
  --ease-spring-1: cubic-bezier(0.25, 0.46, 0.45, 0.94);
1138
1138
  --ease-spring-2: cubic-bezier(0.68, -0.55, 0.265, 1.55);
1139
1139
  --ease-spring-3: cubic-bezier(0.175, 0.885, 0.32, 1.275);
1140
- --transition-fast: var(--duration-2) var(--ease-1);
1141
- --transition-standard: var(--duration-3) var(--ease-2);
1142
- --transition-slow: var(--duration-4) var(--ease-3);
1143
- --transition-spring-fast: var(--duration-spring-1) var(--ease-spring-1);
1144
- --transition-spring-standard: var(--duration-spring-2) var(--ease-spring-1);
1145
- --transition-spring-slow: var(--duration-spring-3) var(--ease-spring-1);
1146
- --transition-spring-bounce: var(--duration-spring-2) var(--ease-spring-2);
1147
- --transition-spring-elastic: var(--duration-spring-3) var(--ease-spring-3);
1148
- --transition-button: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1), transform var(--duration-1) var(--ease-1), padding var(--duration-1) var(--ease-1);
1149
- --transition-text-field: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1);
1150
- --transition-select: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1);
1151
- --transition-badge: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), padding var(--duration-1) var(--ease-1);
1152
- --transition-card: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), top var(--duration-2) var(--ease-1);
1153
- --transition-tabs: color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1), font-weight var(--duration-2) var(--ease-2), letter-spacing var(--duration-2) var(--ease-2), word-spacing var(--duration-2) var(--ease-2), transform var(--duration-1) var(--ease-1);
1154
- --transition-segmented-control: opacity var(--duration-2) var(--ease-1), transform var(--duration-2) var(--ease-3), background-color var(--duration-2) var(--ease-1);
1155
- --transition-menu: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
1156
- --transition-checkbox: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), color var(--duration-1) var(--ease-1);
1157
- --transition-radio: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), color var(--duration-1) var(--ease-1);
1158
- --transition-focus: outline var(--duration-2) var(--ease-1), outline-offset var(--duration-2) var(--ease-1);
1159
- --transition-progress: transform var(--duration-2) var(--ease-1);
1160
- --transition-accordion-content: height var(--duration-spring-2) var(--ease-spring-1), opacity var(--duration-spring-2) var(--ease-spring-1), transform var(--duration-spring-2) var(--ease-spring-1);
1161
- --transition-accordion-trigger: background-color var(--duration-spring-1) var(--ease-spring-1), transform var(--duration-spring-1) var(--ease-spring-1);
1162
- --transition-accordion-trigger-active: transform var(--duration-1) var(--ease-spring-2);
1163
- --transition-spring-gpu: transform var(--duration-spring-2) var(--ease-spring-1), opacity var(--duration-spring-2) var(--ease-spring-1);
1164
- --transition-spring-gpu-fast: transform var(--duration-spring-1) var(--ease-spring-1), opacity var(--duration-spring-1) var(--ease-spring-1);
1140
+ --transition-fast: var(--motion-duration-micro) var(--motion-ease-standard);
1141
+ --transition-standard: var(--motion-duration-small) var(--motion-ease-standard);
1142
+ --transition-slow: var(--motion-duration-medium) var(--motion-ease-smooth);
1143
+ --transition-spring-fast: var(--motion-duration-micro) var(--motion-spring-snappy);
1144
+ --transition-spring-standard: var(--motion-duration-small) var(--motion-spring-snappy);
1145
+ --transition-spring-slow: var(--motion-duration-medium) var(--motion-spring-snappy);
1146
+ --transition-spring-bounce: var(--motion-duration-small) var(--motion-spring-bounce);
1147
+ --transition-spring-elastic: var(--motion-duration-medium) var(--motion-spring-elastic);
1148
+ --motion-duration-micro: 75ms;
1149
+ --motion-duration-small: 150ms;
1150
+ --motion-duration-medium: 250ms;
1151
+ --motion-duration-large: 350ms;
1152
+ --motion-ease-standard: ease-in-out;
1153
+ --motion-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
1154
+ --motion-ease-anticipate: cubic-bezier(0.36, 0, 0.66, -0.56);
1155
+ --motion-ease-follow: cubic-bezier(0.34, 1.56, 0.64, 1);
1156
+ --motion-spring-snappy: var(--ease-spring-1);
1157
+ --motion-spring-bounce: var(--ease-spring-2);
1158
+ --motion-spring-elastic: var(--ease-spring-3);
1159
+ --motion-stagger-1: 15ms;
1160
+ --motion-stagger-2: 30ms;
1161
+ --motion-stagger-3: 45ms;
1162
+ --spring-snappy-mass: 1;
1163
+ --spring-snappy-stiffness: 280;
1164
+ --spring-snappy-damping: 24;
1165
+ --spring-snappy-initial-velocity: 0;
1166
+ --spring-smooth-mass: 1;
1167
+ --spring-smooth-stiffness: 200;
1168
+ --spring-smooth-damping: 30;
1169
+ --spring-smooth-initial-velocity: 0;
1170
+ --transition-button: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), backdrop-filter var(--motion-duration-small) var(--motion-ease-standard), transform var(--motion-duration-micro) var(--motion-spring-snappy), padding var(--motion-duration-micro) var(--motion-ease-standard);
1171
+ --transition-text-field: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
1172
+ --transition-select: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
1173
+ --transition-badge: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), padding var(--motion-duration-micro) var(--motion-ease-standard);
1174
+ --transition-card: background-color var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), top var(--motion-duration-small) var(--motion-ease-standard);
1175
+ --transition-tabs: color var(--motion-duration-micro) var(--motion-ease-standard), background-color var(--motion-duration-micro) var(--motion-ease-standard), font-weight var(--motion-duration-small) var(--motion-ease-standard), letter-spacing var(--motion-duration-small) var(--motion-ease-standard), word-spacing var(--motion-duration-small) var(--motion-ease-standard), transform var(--motion-duration-micro) var(--motion-spring-snappy);
1176
+ --transition-segmented-control: opacity var(--motion-duration-small) var(--motion-ease-standard), transform var(--motion-duration-small) var(--motion-spring-snappy), background-color var(--motion-duration-small) var(--motion-ease-standard);
1177
+ --transition-menu: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
1178
+ --transition-checkbox: background-color var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard);
1179
+ --transition-radio: background-color var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard);
1180
+ --transition-focus: outline var(--motion-duration-small) var(--motion-ease-standard), outline-offset var(--motion-duration-small) var(--motion-ease-standard);
1181
+ --transition-progress: transform var(--motion-duration-small) var(--motion-ease-standard);
1182
+ --transition-accordion-content: height var(--motion-duration-small) var(--motion-spring-snappy), opacity var(--motion-duration-small) var(--motion-spring-snappy), transform var(--motion-duration-small) var(--motion-spring-snappy);
1183
+ --transition-accordion-trigger: background-color var(--motion-duration-small) var(--motion-spring-snappy), transform var(--motion-duration-micro) var(--motion-spring-snappy);
1184
+ --transition-accordion-trigger-active: transform var(--motion-duration-micro) var(--motion-spring-bounce);
1185
+ --transition-spring-gpu: transform var(--motion-duration-small) var(--motion-spring-snappy), opacity var(--motion-duration-small) var(--motion-spring-snappy);
1186
+ --transition-spring-gpu-fast: transform var(--motion-duration-micro) var(--motion-spring-snappy), opacity var(--motion-duration-micro) var(--motion-spring-snappy);
1165
1187
  --font-size-0: calc(10px * var(--scaling));
1166
1188
  --font-size-1: calc(12px * var(--scaling));
1167
1189
  --font-size-2: calc(14px * var(--scaling));
@@ -1289,8 +1311,8 @@
1289
1311
  --radius-5: calc(16px * var(--scaling) * var(--radius-factor));
1290
1312
  --radius-6: calc(20px * var(--scaling) * var(--radius-factor));
1291
1313
  --radius-7: calc(24px * var(--scaling) * var(--radius-factor));
1292
- --radius-8: calc(32px * var(--scaling) * var(--radius-factor));
1293
- --radius-9: calc(40px * var(--scaling) * var(--radius-factor));
1314
+ --radius-8: calc(28px * var(--scaling) * var(--radius-factor));
1315
+ --radius-9: calc(32px * var(--scaling) * var(--radius-factor));
1294
1316
  }
1295
1317
  [data-radius='none'] {
1296
1318
  --radius-factor: 0;
package/tokens.css CHANGED
@@ -3312,11 +3312,11 @@
3312
3312
  --surface-opacity-light: var(--opacity-5);
3313
3313
  --surface-opacity-heavy: var(--opacity-6);
3314
3314
  --surface-opacity-dark: var(--opacity-7);
3315
- --dialog-opacity: var(--opacity-7);
3315
+ --dialog-opacity: var(--opacity-9);
3316
3316
  --dialog-opacity-percentage: calc(var(--dialog-opacity) * 100%);
3317
- --panel-opacity: var(--opacity-6);
3317
+ --panel-opacity: var(--opacity-8);
3318
3318
  --panel-opacity-percentage: calc(var(--panel-opacity) * 100%);
3319
- --surface-opacity: var(--opacity-5);
3319
+ --surface-opacity: var(--opacity-7);
3320
3320
  --surface-opacity-percentage: calc(var(--surface-opacity) * 100%);
3321
3321
  --border-width-standard: 1px;
3322
3322
  --classic-elevation-offset: -0.02em;
@@ -3391,6 +3391,7 @@
3391
3391
  --position-negative-full: -100%;
3392
3392
  --position-zero: 0%;
3393
3393
  --transition-background-blur: background-color var(--duration-2) var(--ease-1);
3394
+ --sheet-slide-distance: 50%;
3394
3395
  --spacing-multiplier-small: 0.5;
3395
3396
  --spacing-multiplier-medium: 0.75;
3396
3397
  --spacing-multiplier-large: 1.25;
@@ -4507,42 +4508,64 @@
4507
4508
  --duration-3: 100ms;
4508
4509
  --duration-4: 150ms;
4509
4510
  --duration-5: 200ms;
4510
- --duration-spring-1: 200ms;
4511
- --duration-spring-2: 250ms;
4512
- --duration-spring-3: 300ms;
4513
- --ease-1: ease-out;
4514
- --ease-2: ease-in-out;
4515
- --ease-3: cubic-bezier(0.4, 0, 0.2, 1);
4516
- --ease-4: cubic-bezier(0.25, 0.46, 0.45, 0.94);
4517
- --ease-5: cubic-bezier(0.68, -0.55, 0.265, 1.55);
4511
+ --duration-spring-1: 100ms;
4512
+ --duration-spring-2: 150ms;
4513
+ --duration-spring-3: 200ms;
4514
+ --ease-1: var(--ease-spring-1);
4515
+ --ease-2: var(--ease-spring-2);
4516
+ --ease-3: var(--ease-spring-3);
4517
+ --ease-4: var(--ease-spring-1);
4518
+ --ease-5: var(--ease-spring-2);
4518
4519
  --ease-spring-1: cubic-bezier(0.25, 0.46, 0.45, 0.94);
4519
4520
  --ease-spring-2: cubic-bezier(0.68, -0.55, 0.265, 1.55);
4520
4521
  --ease-spring-3: cubic-bezier(0.175, 0.885, 0.32, 1.275);
4521
- --transition-fast: var(--duration-2) var(--ease-1);
4522
- --transition-standard: var(--duration-3) var(--ease-2);
4523
- --transition-slow: var(--duration-4) var(--ease-3);
4524
- --transition-spring-fast: var(--duration-spring-1) var(--ease-spring-1);
4525
- --transition-spring-standard: var(--duration-spring-2) var(--ease-spring-1);
4526
- --transition-spring-slow: var(--duration-spring-3) var(--ease-spring-1);
4527
- --transition-spring-bounce: var(--duration-spring-2) var(--ease-spring-2);
4528
- --transition-spring-elastic: var(--duration-spring-3) var(--ease-spring-3);
4529
- --transition-button: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1), transform var(--duration-1) var(--ease-1), padding var(--duration-1) var(--ease-1);
4530
- --transition-text-field: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1);
4531
- --transition-select: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1);
4532
- --transition-badge: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), padding var(--duration-1) var(--ease-1);
4533
- --transition-card: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), top var(--duration-2) var(--ease-1);
4534
- --transition-tabs: color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1), font-weight var(--duration-2) var(--ease-2), letter-spacing var(--duration-2) var(--ease-2), word-spacing var(--duration-2) var(--ease-2), transform var(--duration-1) var(--ease-1);
4535
- --transition-segmented-control: opacity var(--duration-2) var(--ease-1), transform var(--duration-2) var(--ease-3), background-color var(--duration-2) var(--ease-1);
4536
- --transition-menu: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
4537
- --transition-checkbox: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), color var(--duration-1) var(--ease-1);
4538
- --transition-radio: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), color var(--duration-1) var(--ease-1);
4539
- --transition-focus: outline var(--duration-2) var(--ease-1), outline-offset var(--duration-2) var(--ease-1);
4540
- --transition-progress: transform var(--duration-2) var(--ease-1);
4541
- --transition-accordion-content: height var(--duration-spring-2) var(--ease-spring-1), opacity var(--duration-spring-2) var(--ease-spring-1), transform var(--duration-spring-2) var(--ease-spring-1);
4542
- --transition-accordion-trigger: background-color var(--duration-spring-1) var(--ease-spring-1), transform var(--duration-spring-1) var(--ease-spring-1);
4543
- --transition-accordion-trigger-active: transform var(--duration-1) var(--ease-spring-2);
4544
- --transition-spring-gpu: transform var(--duration-spring-2) var(--ease-spring-1), opacity var(--duration-spring-2) var(--ease-spring-1);
4545
- --transition-spring-gpu-fast: transform var(--duration-spring-1) var(--ease-spring-1), opacity var(--duration-spring-1) var(--ease-spring-1);
4522
+ --transition-fast: var(--motion-duration-micro) var(--motion-ease-standard);
4523
+ --transition-standard: var(--motion-duration-small) var(--motion-ease-standard);
4524
+ --transition-slow: var(--motion-duration-medium) var(--motion-ease-smooth);
4525
+ --transition-spring-fast: var(--motion-duration-micro) var(--motion-spring-snappy);
4526
+ --transition-spring-standard: var(--motion-duration-small) var(--motion-spring-snappy);
4527
+ --transition-spring-slow: var(--motion-duration-medium) var(--motion-spring-snappy);
4528
+ --transition-spring-bounce: var(--motion-duration-small) var(--motion-spring-bounce);
4529
+ --transition-spring-elastic: var(--motion-duration-medium) var(--motion-spring-elastic);
4530
+ --motion-duration-micro: 75ms;
4531
+ --motion-duration-small: 150ms;
4532
+ --motion-duration-medium: 250ms;
4533
+ --motion-duration-large: 350ms;
4534
+ --motion-ease-standard: ease-in-out;
4535
+ --motion-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
4536
+ --motion-ease-anticipate: cubic-bezier(0.36, 0, 0.66, -0.56);
4537
+ --motion-ease-follow: cubic-bezier(0.34, 1.56, 0.64, 1);
4538
+ --motion-spring-snappy: var(--ease-spring-1);
4539
+ --motion-spring-bounce: var(--ease-spring-2);
4540
+ --motion-spring-elastic: var(--ease-spring-3);
4541
+ --motion-stagger-1: 15ms;
4542
+ --motion-stagger-2: 30ms;
4543
+ --motion-stagger-3: 45ms;
4544
+ --spring-snappy-mass: 1;
4545
+ --spring-snappy-stiffness: 280;
4546
+ --spring-snappy-damping: 24;
4547
+ --spring-snappy-initial-velocity: 0;
4548
+ --spring-smooth-mass: 1;
4549
+ --spring-smooth-stiffness: 200;
4550
+ --spring-smooth-damping: 30;
4551
+ --spring-smooth-initial-velocity: 0;
4552
+ --transition-button: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), backdrop-filter var(--motion-duration-small) var(--motion-ease-standard), transform var(--motion-duration-micro) var(--motion-spring-snappy), padding var(--motion-duration-micro) var(--motion-ease-standard);
4553
+ --transition-text-field: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
4554
+ --transition-select: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
4555
+ --transition-badge: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), padding var(--motion-duration-micro) var(--motion-ease-standard);
4556
+ --transition-card: background-color var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), top var(--motion-duration-small) var(--motion-ease-standard);
4557
+ --transition-tabs: color var(--motion-duration-micro) var(--motion-ease-standard), background-color var(--motion-duration-micro) var(--motion-ease-standard), font-weight var(--motion-duration-small) var(--motion-ease-standard), letter-spacing var(--motion-duration-small) var(--motion-ease-standard), word-spacing var(--motion-duration-small) var(--motion-ease-standard), transform var(--motion-duration-micro) var(--motion-spring-snappy);
4558
+ --transition-segmented-control: opacity var(--motion-duration-small) var(--motion-ease-standard), transform var(--motion-duration-small) var(--motion-spring-snappy), background-color var(--motion-duration-small) var(--motion-ease-standard);
4559
+ --transition-menu: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
4560
+ --transition-checkbox: background-color var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard);
4561
+ --transition-radio: background-color var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard);
4562
+ --transition-focus: outline var(--motion-duration-small) var(--motion-ease-standard), outline-offset var(--motion-duration-small) var(--motion-ease-standard);
4563
+ --transition-progress: transform var(--motion-duration-small) var(--motion-ease-standard);
4564
+ --transition-accordion-content: height var(--motion-duration-small) var(--motion-spring-snappy), opacity var(--motion-duration-small) var(--motion-spring-snappy), transform var(--motion-duration-small) var(--motion-spring-snappy);
4565
+ --transition-accordion-trigger: background-color var(--motion-duration-small) var(--motion-spring-snappy), transform var(--motion-duration-micro) var(--motion-spring-snappy);
4566
+ --transition-accordion-trigger-active: transform var(--motion-duration-micro) var(--motion-spring-bounce);
4567
+ --transition-spring-gpu: transform var(--motion-duration-small) var(--motion-spring-snappy), opacity var(--motion-duration-small) var(--motion-spring-snappy);
4568
+ --transition-spring-gpu-fast: transform var(--motion-duration-micro) var(--motion-spring-snappy), opacity var(--motion-duration-micro) var(--motion-spring-snappy);
4546
4569
  --font-size-0: calc(10px * var(--scaling));
4547
4570
  --font-size-1: calc(12px * var(--scaling));
4548
4571
  --font-size-2: calc(14px * var(--scaling));
@@ -4670,8 +4693,8 @@
4670
4693
  --radius-5: calc(16px * var(--scaling) * var(--radius-factor));
4671
4694
  --radius-6: calc(20px * var(--scaling) * var(--radius-factor));
4672
4695
  --radius-7: calc(24px * var(--scaling) * var(--radius-factor));
4673
- --radius-8: calc(32px * var(--scaling) * var(--radius-factor));
4674
- --radius-9: calc(40px * var(--scaling) * var(--radius-factor));
4696
+ --radius-8: calc(28px * var(--scaling) * var(--radius-factor));
4697
+ --radius-9: calc(32px * var(--scaling) * var(--radius-factor));
4675
4698
  }
4676
4699
  [data-radius='none'] {
4677
4700
  --radius-factor: 0;