@mortenbrudvik/waveui 0.11.0 → 0.13.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 (210) hide show
  1. package/README.md +157 -13
  2. package/dist/components/button/Link.cjs +1 -1
  3. package/dist/components/button/Link.cjs.map +1 -1
  4. package/dist/components/button/Link.mjs +4 -4
  5. package/dist/components/data-display/Avatar.cjs +1 -1
  6. package/dist/components/data-display/Avatar.cjs.map +1 -1
  7. package/dist/components/data-display/Avatar.colors.cjs +2 -0
  8. package/dist/components/data-display/Avatar.colors.cjs.map +1 -0
  9. package/dist/components/data-display/Avatar.colors.mjs +45 -0
  10. package/dist/components/data-display/Avatar.colors.mjs.map +1 -0
  11. package/dist/components/data-display/Avatar.context.cjs +1 -1
  12. package/dist/components/data-display/Avatar.context.cjs.map +1 -1
  13. package/dist/components/data-display/Avatar.context.mjs +4 -2
  14. package/dist/components/data-display/Avatar.context.mjs.map +1 -1
  15. package/dist/components/data-display/Avatar.mjs +103 -96
  16. package/dist/components/data-display/Avatar.mjs.map +1 -1
  17. package/dist/components/data-display/Avatar.sizes.cjs +2 -0
  18. package/dist/components/data-display/Avatar.sizes.cjs.map +1 -0
  19. package/dist/components/data-display/Avatar.sizes.mjs +41 -0
  20. package/dist/components/data-display/Avatar.sizes.mjs.map +1 -0
  21. package/dist/components/data-display/AvatarGroup.cjs +1 -1
  22. package/dist/components/data-display/AvatarGroup.cjs.map +1 -1
  23. package/dist/components/data-display/AvatarGroup.context.cjs +2 -0
  24. package/dist/components/data-display/AvatarGroup.context.cjs.map +1 -0
  25. package/dist/components/data-display/AvatarGroup.context.mjs +9 -0
  26. package/dist/components/data-display/AvatarGroup.context.mjs.map +1 -0
  27. package/dist/components/data-display/AvatarGroup.mjs +65 -122
  28. package/dist/components/data-display/AvatarGroup.mjs.map +1 -1
  29. package/dist/components/data-display/AvatarGroup.partition.cjs +2 -0
  30. package/dist/components/data-display/AvatarGroup.partition.cjs.map +1 -0
  31. package/dist/components/data-display/AvatarGroup.partition.mjs +14 -0
  32. package/dist/components/data-display/AvatarGroup.partition.mjs.map +1 -0
  33. package/dist/components/data-display/AvatarGroup.parts.cjs +2 -0
  34. package/dist/components/data-display/AvatarGroup.parts.cjs.map +1 -0
  35. package/dist/components/data-display/AvatarGroup.parts.mjs +178 -0
  36. package/dist/components/data-display/AvatarGroup.parts.mjs.map +1 -0
  37. package/dist/components/data-display/InfoButton.cjs +1 -1
  38. package/dist/components/data-display/InfoButton.cjs.map +1 -1
  39. package/dist/components/data-display/InfoButton.mjs +12 -12
  40. package/dist/components/data-display/InteractionTag.cjs +1 -1
  41. package/dist/components/data-display/InteractionTag.cjs.map +1 -1
  42. package/dist/components/data-display/InteractionTag.mjs +36 -33
  43. package/dist/components/data-display/InteractionTag.mjs.map +1 -1
  44. package/dist/components/data-display/Persona.cjs +1 -1
  45. package/dist/components/data-display/Persona.cjs.map +1 -1
  46. package/dist/components/data-display/Persona.mjs +96 -37
  47. package/dist/components/data-display/Persona.mjs.map +1 -1
  48. package/dist/components/data-display/PresenceBadge.cjs +1 -1
  49. package/dist/components/data-display/PresenceBadge.cjs.map +1 -1
  50. package/dist/components/data-display/PresenceBadge.mjs +42 -28
  51. package/dist/components/data-display/PresenceBadge.mjs.map +1 -1
  52. package/dist/components/data-display/Tag.cjs +1 -1
  53. package/dist/components/data-display/Tag.cjs.map +1 -1
  54. package/dist/components/data-display/Tag.mjs +111 -108
  55. package/dist/components/data-display/Tag.mjs.map +1 -1
  56. package/dist/components/feedback/Toaster.cjs +1 -1
  57. package/dist/components/feedback/Toaster.cjs.map +1 -1
  58. package/dist/components/feedback/Toaster.mjs +235 -235
  59. package/dist/components/feedback/Toaster.mjs.map +1 -1
  60. package/dist/components/input/Combobox.cjs +1 -1
  61. package/dist/components/input/Combobox.cjs.map +1 -1
  62. package/dist/components/input/Combobox.mjs +176 -175
  63. package/dist/components/input/Combobox.mjs.map +1 -1
  64. package/dist/components/input/DatePicker.cjs +1 -1
  65. package/dist/components/input/DatePicker.cjs.map +1 -1
  66. package/dist/components/input/DatePicker.mjs +188 -187
  67. package/dist/components/input/DatePicker.mjs.map +1 -1
  68. package/dist/components/input/Dropdown.cjs +1 -1
  69. package/dist/components/input/Dropdown.cjs.map +1 -1
  70. package/dist/components/input/Dropdown.mjs +41 -40
  71. package/dist/components/input/Dropdown.mjs.map +1 -1
  72. package/dist/components/input/Option.cjs +1 -1
  73. package/dist/components/input/Option.cjs.map +1 -1
  74. package/dist/components/input/Option.mjs +89 -87
  75. package/dist/components/input/Option.mjs.map +1 -1
  76. package/dist/components/input/TagPicker.root.cjs +1 -1
  77. package/dist/components/input/TagPicker.root.cjs.map +1 -1
  78. package/dist/components/input/TagPicker.root.mjs +136 -135
  79. package/dist/components/input/TagPicker.root.mjs.map +1 -1
  80. package/dist/components/input/TimePicker.cjs +1 -1
  81. package/dist/components/input/TimePicker.cjs.map +1 -1
  82. package/dist/components/input/TimePicker.mjs +156 -154
  83. package/dist/components/input/TimePicker.mjs.map +1 -1
  84. package/dist/components/layout/Card.cjs +1 -1
  85. package/dist/components/layout/Card.cjs.map +1 -1
  86. package/dist/components/layout/Card.context.cjs +2 -0
  87. package/dist/components/layout/Card.context.cjs.map +1 -0
  88. package/dist/components/layout/Card.context.mjs +14 -0
  89. package/dist/components/layout/Card.context.mjs.map +1 -0
  90. package/dist/components/layout/Card.mjs +138 -92
  91. package/dist/components/layout/Card.mjs.map +1 -1
  92. package/dist/components/layout/Card.preview.cjs +2 -0
  93. package/dist/components/layout/Card.preview.cjs.map +1 -0
  94. package/dist/components/layout/Card.preview.mjs +22 -0
  95. package/dist/components/layout/Card.preview.mjs.map +1 -0
  96. package/dist/components/layout/Carousel.button.cjs +2 -0
  97. package/dist/components/layout/Carousel.button.cjs.map +1 -0
  98. package/dist/components/layout/Carousel.button.mjs +34 -0
  99. package/dist/components/layout/Carousel.button.mjs.map +1 -0
  100. package/dist/components/layout/Carousel.cjs +1 -1
  101. package/dist/components/layout/Carousel.cjs.map +1 -1
  102. package/dist/components/layout/Carousel.context.cjs +2 -0
  103. package/dist/components/layout/Carousel.context.cjs.map +1 -0
  104. package/dist/components/layout/Carousel.context.mjs +24 -0
  105. package/dist/components/layout/Carousel.context.mjs.map +1 -0
  106. package/dist/components/layout/Carousel.drag.cjs +2 -0
  107. package/dist/components/layout/Carousel.drag.cjs.map +1 -0
  108. package/dist/components/layout/Carousel.drag.mjs +79 -0
  109. package/dist/components/layout/Carousel.drag.mjs.map +1 -0
  110. package/dist/components/layout/Carousel.groups.cjs +2 -0
  111. package/dist/components/layout/Carousel.groups.cjs.map +1 -0
  112. package/dist/components/layout/Carousel.groups.mjs +23 -0
  113. package/dist/components/layout/Carousel.groups.mjs.map +1 -0
  114. package/dist/components/layout/Carousel.mjs +288 -150
  115. package/dist/components/layout/Carousel.mjs.map +1 -1
  116. package/dist/components/layout/Carousel.styles.cjs +2 -0
  117. package/dist/components/layout/Carousel.styles.cjs.map +1 -0
  118. package/dist/components/layout/Carousel.styles.mjs +30 -0
  119. package/dist/components/layout/Carousel.styles.mjs.map +1 -0
  120. package/dist/components/layout/TabList.cjs +1 -1
  121. package/dist/components/layout/TabList.cjs.map +1 -1
  122. package/dist/components/layout/TabList.mjs +163 -124
  123. package/dist/components/layout/TabList.mjs.map +1 -1
  124. package/dist/components/navigation/Menu.popover.cjs +1 -1
  125. package/dist/components/navigation/Menu.popover.cjs.map +1 -1
  126. package/dist/components/navigation/Menu.popover.mjs +137 -127
  127. package/dist/components/navigation/Menu.popover.mjs.map +1 -1
  128. package/dist/components/navigation/Menu.root.cjs +1 -1
  129. package/dist/components/navigation/Menu.root.cjs.map +1 -1
  130. package/dist/components/navigation/Menu.root.mjs +4 -4
  131. package/dist/components/overlays/Dialog.cjs +1 -1
  132. package/dist/components/overlays/Dialog.cjs.map +1 -1
  133. package/dist/components/overlays/Dialog.mjs +123 -123
  134. package/dist/components/overlays/Dialog.mjs.map +1 -1
  135. package/dist/components/overlays/Drawer.panel.cjs +1 -1
  136. package/dist/components/overlays/Drawer.panel.cjs.map +1 -1
  137. package/dist/components/overlays/Drawer.panel.mjs +12 -12
  138. package/dist/components/overlays/Drawer.panel.mjs.map +1 -1
  139. package/dist/components/overlays/Popover.cjs +1 -1
  140. package/dist/components/overlays/Popover.cjs.map +1 -1
  141. package/dist/components/overlays/Popover.mjs +173 -162
  142. package/dist/components/overlays/Popover.mjs.map +1 -1
  143. package/dist/components/overlays/TeachingPopover.cjs +1 -1
  144. package/dist/components/overlays/TeachingPopover.cjs.map +1 -1
  145. package/dist/components/overlays/TeachingPopover.mjs +96 -91
  146. package/dist/components/overlays/TeachingPopover.mjs.map +1 -1
  147. package/dist/components/overlays/Tooltip.cjs +1 -1
  148. package/dist/components/overlays/Tooltip.cjs.map +1 -1
  149. package/dist/components/overlays/Tooltip.mjs +47 -47
  150. package/dist/components/overlays/Tooltip.mjs.map +1 -1
  151. package/dist/components/portal/Portal.cjs +1 -1
  152. package/dist/components/portal/Portal.cjs.map +1 -1
  153. package/dist/components/portal/Portal.mjs +5 -5
  154. package/dist/components/table/DataGrid.cjs +1 -1
  155. package/dist/components/table/DataGrid.cjs.map +1 -1
  156. package/dist/components/table/DataGrid.mjs +1 -1
  157. package/dist/hooks/useDismiss.cjs.map +1 -1
  158. package/dist/hooks/useDismiss.mjs.map +1 -1
  159. package/dist/hooks/useFocusTrap.cjs.map +1 -1
  160. package/dist/hooks/useFocusTrap.mjs.map +1 -1
  161. package/dist/hooks/useFocusVisible.cjs +2 -0
  162. package/dist/hooks/useFocusVisible.cjs.map +1 -0
  163. package/dist/hooks/useFocusVisible.mjs +49 -0
  164. package/dist/hooks/useFocusVisible.mjs.map +1 -0
  165. package/dist/hooks/useFocusableGroup.cjs +2 -0
  166. package/dist/hooks/useFocusableGroup.cjs.map +1 -0
  167. package/dist/hooks/useFocusableGroup.mjs +70 -0
  168. package/dist/hooks/useFocusableGroup.mjs.map +1 -0
  169. package/dist/hooks/useModalLayer.cjs +1 -1
  170. package/dist/hooks/useModalLayer.cjs.map +1 -1
  171. package/dist/hooks/useModalLayer.mjs +4 -4
  172. package/dist/hooks/useModalOpen.cjs +2 -0
  173. package/dist/hooks/useModalOpen.cjs.map +1 -0
  174. package/dist/hooks/useModalOpen.mjs +14 -0
  175. package/dist/hooks/useModalOpen.mjs.map +1 -0
  176. package/dist/hooks/usePopupPosition.cjs +1 -1
  177. package/dist/hooks/usePopupPosition.cjs.map +1 -1
  178. package/dist/hooks/usePopupPosition.mjs +82 -53
  179. package/dist/hooks/usePopupPosition.mjs.map +1 -1
  180. package/dist/hooks/useResolvedTarget.cjs +2 -0
  181. package/dist/hooks/useResolvedTarget.cjs.map +1 -0
  182. package/dist/hooks/useResolvedTarget.mjs +37 -0
  183. package/dist/hooks/useResolvedTarget.mjs.map +1 -0
  184. package/dist/hooks/useRovingGrid.cjs +1 -1
  185. package/dist/hooks/useRovingGrid.cjs.map +1 -1
  186. package/dist/hooks/useRovingGrid.mjs +8 -57
  187. package/dist/hooks/useRovingGrid.mjs.map +1 -1
  188. package/dist/hooks/useRovingTabIndex.cjs +1 -1
  189. package/dist/hooks/useRovingTabIndex.cjs.map +1 -1
  190. package/dist/hooks/useRovingTabIndex.mjs +142 -107
  191. package/dist/hooks/useRovingTabIndex.mjs.map +1 -1
  192. package/dist/index.cjs +1 -1
  193. package/dist/index.d.cts +1364 -66
  194. package/dist/index.d.ts +1364 -66
  195. package/dist/index.mjs +132 -115
  196. package/dist/lib/classNames.cjs +1 -1
  197. package/dist/lib/classNames.cjs.map +1 -1
  198. package/dist/lib/classNames.mjs +112 -92
  199. package/dist/lib/classNames.mjs.map +1 -1
  200. package/dist/lib/initials.cjs +2 -0
  201. package/dist/lib/initials.cjs.map +1 -0
  202. package/dist/lib/initials.mjs +21 -0
  203. package/dist/lib/initials.mjs.map +1 -0
  204. package/dist/lib/layers.cjs +1 -1
  205. package/dist/lib/layers.cjs.map +1 -1
  206. package/dist/lib/layers.mjs +112 -109
  207. package/dist/lib/layers.mjs.map +1 -1
  208. package/dist/styles.css +1 -1
  209. package/package.json +1 -1
  210. package/src/styles/tokens.css +102 -0
package/src/styles/tokens.css CHANGED
@@ -183,6 +183,32 @@
183
183
  --wave-presence-offline: #616161;
184
184
  --wave-presence-oof: #b4009e;
185
185
  --wave-presence-glyph: #ffffff;
186
+
187
+ /* Persona palette: avatar colors (Avatar `color`), each with its text color */
188
+ --wave-palette-red: #c50f1f;
189
+ --wave-palette-red-foreground: #ffffff;
190
+ --wave-palette-pumpkin: #b5470a;
191
+ --wave-palette-pumpkin-foreground: #ffffff;
192
+ --wave-palette-gold: #8a6200;
193
+ --wave-palette-gold-foreground: #ffffff;
194
+ --wave-palette-forest: #107c10;
195
+ --wave-palette-forest-foreground: #ffffff;
196
+ --wave-palette-teal: #0a6b6b;
197
+ --wave-palette-teal-foreground: #ffffff;
198
+ --wave-palette-blue: #0f6cbd;
199
+ --wave-palette-blue-foreground: #ffffff;
200
+ --wave-palette-navy: #103a73;
201
+ --wave-palette-navy-foreground: #ffffff;
202
+ --wave-palette-lavender: #6a5cb8;
203
+ --wave-palette-lavender-foreground: #ffffff;
204
+ --wave-palette-purple: #5c2e91;
205
+ --wave-palette-purple-foreground: #ffffff;
206
+ --wave-palette-magenta: #b4009e;
207
+ --wave-palette-magenta-foreground: #ffffff;
208
+ --wave-palette-brown: #8e562e;
209
+ --wave-palette-brown-foreground: #ffffff;
210
+ --wave-palette-steel: #4f7391;
211
+ --wave-palette-steel-foreground: #ffffff;
186
212
  --wave-backdrop: rgb(0 0 0 / 0.4);
187
213
 
188
214
  /* Derived (re-declared per theme so nested themes re-resolve them) */
@@ -280,6 +306,32 @@
280
306
  --wave-presence-offline: #adadad;
281
307
  --wave-presence-oof: #d696c8;
282
308
  --wave-presence-glyph: #000000;
309
+
310
+ /* Persona palette: avatar colors (Avatar `color`), each with its text color */
311
+ --wave-palette-red: #f48a94;
312
+ --wave-palette-red-foreground: #000000;
313
+ --wave-palette-pumpkin: #f2a46b;
314
+ --wave-palette-pumpkin-foreground: #000000;
315
+ --wave-palette-gold: #f7b538;
316
+ --wave-palette-gold-foreground: #000000;
317
+ --wave-palette-forest: #6fcf6f;
318
+ --wave-palette-forest-foreground: #000000;
319
+ --wave-palette-teal: #4cc2c2;
320
+ --wave-palette-teal-foreground: #000000;
321
+ --wave-palette-blue: #479ef5;
322
+ --wave-palette-blue-foreground: #000000;
323
+ --wave-palette-navy: #7fa7e0;
324
+ --wave-palette-navy-foreground: #000000;
325
+ --wave-palette-lavender: #b4a7f0;
326
+ --wave-palette-lavender-foreground: #000000;
327
+ --wave-palette-purple: #c8a6f0;
328
+ --wave-palette-purple-foreground: #000000;
329
+ --wave-palette-magenta: #ec8fdc;
330
+ --wave-palette-magenta-foreground: #000000;
331
+ --wave-palette-brown: #d4a373;
332
+ --wave-palette-brown-foreground: #000000;
333
+ --wave-palette-steel: #9fb8cc;
334
+ --wave-palette-steel-foreground: #000000;
283
335
  --wave-backdrop: rgb(0 0 0 / 0.5);
284
336
 
285
337
  /* Derived (re-declared per theme so nested themes re-resolve them) */
@@ -377,6 +429,32 @@
377
429
  --wave-presence-offline: #ffffff;
378
430
  --wave-presence-oof: #ff80ff;
379
431
  --wave-presence-glyph: #000000;
432
+
433
+ /* Persona palette: avatar colors (Avatar `color`), each with its text color */
434
+ --wave-palette-red: #ffffff;
435
+ --wave-palette-red-foreground: #000000;
436
+ --wave-palette-pumpkin: #ffffff;
437
+ --wave-palette-pumpkin-foreground: #000000;
438
+ --wave-palette-gold: #ffffff;
439
+ --wave-palette-gold-foreground: #000000;
440
+ --wave-palette-forest: #ffffff;
441
+ --wave-palette-forest-foreground: #000000;
442
+ --wave-palette-teal: #ffffff;
443
+ --wave-palette-teal-foreground: #000000;
444
+ --wave-palette-blue: #ffffff;
445
+ --wave-palette-blue-foreground: #000000;
446
+ --wave-palette-navy: #ffffff;
447
+ --wave-palette-navy-foreground: #000000;
448
+ --wave-palette-lavender: #ffffff;
449
+ --wave-palette-lavender-foreground: #000000;
450
+ --wave-palette-purple: #ffffff;
451
+ --wave-palette-purple-foreground: #000000;
452
+ --wave-palette-magenta: #ffffff;
453
+ --wave-palette-magenta-foreground: #000000;
454
+ --wave-palette-brown: #ffffff;
455
+ --wave-palette-brown-foreground: #000000;
456
+ --wave-palette-steel: #ffffff;
457
+ --wave-palette-steel-foreground: #000000;
380
458
  --wave-backdrop: rgb(0 0 0 / 0.8);
381
459
 
382
460
  /* Derived (re-declared per theme so nested themes re-resolve them) */
@@ -473,6 +551,30 @@
473
551
  --color-presence-offline: var(--wave-presence-offline);
474
552
  --color-presence-oof: var(--wave-presence-oof);
475
553
  --color-presence-glyph: var(--wave-presence-glyph);
554
+ --color-palette-red: var(--wave-palette-red);
555
+ --color-palette-red-foreground: var(--wave-palette-red-foreground);
556
+ --color-palette-pumpkin: var(--wave-palette-pumpkin);
557
+ --color-palette-pumpkin-foreground: var(--wave-palette-pumpkin-foreground);
558
+ --color-palette-gold: var(--wave-palette-gold);
559
+ --color-palette-gold-foreground: var(--wave-palette-gold-foreground);
560
+ --color-palette-forest: var(--wave-palette-forest);
561
+ --color-palette-forest-foreground: var(--wave-palette-forest-foreground);
562
+ --color-palette-teal: var(--wave-palette-teal);
563
+ --color-palette-teal-foreground: var(--wave-palette-teal-foreground);
564
+ --color-palette-blue: var(--wave-palette-blue);
565
+ --color-palette-blue-foreground: var(--wave-palette-blue-foreground);
566
+ --color-palette-navy: var(--wave-palette-navy);
567
+ --color-palette-navy-foreground: var(--wave-palette-navy-foreground);
568
+ --color-palette-lavender: var(--wave-palette-lavender);
569
+ --color-palette-lavender-foreground: var(--wave-palette-lavender-foreground);
570
+ --color-palette-purple: var(--wave-palette-purple);
571
+ --color-palette-purple-foreground: var(--wave-palette-purple-foreground);
572
+ --color-palette-magenta: var(--wave-palette-magenta);
573
+ --color-palette-magenta-foreground: var(--wave-palette-magenta-foreground);
574
+ --color-palette-brown: var(--wave-palette-brown);
575
+ --color-palette-brown-foreground: var(--wave-palette-brown-foreground);
576
+ --color-palette-steel: var(--wave-palette-steel);
577
+ --color-palette-steel-foreground: var(--wave-palette-steel-foreground);
476
578
  --color-backdrop: var(--wave-backdrop);
477
579
 
478
580
  /* Brand ramp (for designers; components use the semantic colors) */