@dumiflex/wp-kit 0.5.0 → 0.6.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 (61) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/README.md +5 -0
  3. package/package.json +4 -3
  4. package/src/Avatar.vue +1 -1
  5. package/src/Banner.vue +4 -4
  6. package/src/Button.vue +73 -44
  7. package/src/Checkbox.vue +201 -63
  8. package/src/Chip.vue +5 -2
  9. package/src/CodeBlock.vue +1 -1
  10. package/src/ColorField.vue +60 -6
  11. package/src/Combobox.vue +10 -14
  12. package/src/ConfirmModal.vue +12 -22
  13. package/src/ContextMenu.vue +11 -30
  14. package/src/CopyButton.vue +1 -1
  15. package/src/DataTable.vue +0 -2
  16. package/src/DatePicker.vue +1 -1
  17. package/src/Disclosure.vue +2 -1
  18. package/src/Drawer.vue +2 -2
  19. package/src/DropZone.vue +2 -2
  20. package/src/HsvPicker.vue +2 -2
  21. package/src/IconPicker.vue +1 -1
  22. package/src/ImageGrid.vue +2 -2
  23. package/src/Lightbox.vue +2 -2
  24. package/src/Modal.vue +109 -44
  25. package/src/ModalShell.vue +26 -5
  26. package/src/Pagination.vue +4 -4
  27. package/src/Popover.vue +68 -12
  28. package/src/RadioGroup.vue +5 -4
  29. package/src/SearchInput.vue +1 -1
  30. package/src/Select.vue +53 -158
  31. package/src/Skeleton.vue +1 -1
  32. package/src/Slider.vue +166 -55
  33. package/src/SortableList.vue +1 -1
  34. package/src/TagInput.vue +1 -1
  35. package/src/Timeline.vue +2 -2
  36. package/src/WorkingLine.vue +320 -0
  37. package/src/WpIconButton.vue +3 -2
  38. package/src/WpImageZoom.vue +7 -7
  39. package/src/WpSegmented.vue +3 -1
  40. package/src/WpSwitch.vue +1 -1
  41. package/src/WpTabs.vue +1 -1
  42. package/src/_modal-motion.css +1 -1
  43. package/src/button.css +8 -6
  44. package/src/floating.ts +5 -0
  45. package/src/hsv.ts +1 -1
  46. package/src/menu.css +51 -0
  47. package/src/motion.css +73 -0
  48. package/src/slider-math.ts +45 -1
  49. package/src/theme/looks.css +6 -19
  50. package/src/theme/tokens.css +12 -1108
  51. package/src/tokens.ts +8 -3
  52. package/src/tooltip.css +8 -5
  53. package/src/useDialogFocus.ts +11 -2
  54. package/src/CloseButton.vue +0 -69
  55. package/src/ColorPicker.vue +0 -201
  56. package/src/ConfirmDialog.vue +0 -165
  57. package/src/RangeSlider.vue +0 -183
  58. package/src/Toggle.vue +0 -36
  59. package/src/WpButton.vue +0 -75
  60. package/src/WpCheck.vue +0 -104
  61. package/src/_skeleton.css +0 -50
@@ -47,8 +47,10 @@
47
47
  /* --wp-radius-cap: the roundest a corner may get in this look. Fixed radii
48
48
  in components are written min(Npx, var(--wp-radius-cap, 999px)) and
49
49
  pills var(--wp-radius-cap, 999px), so Orbit draws them as authored and a
50
- square look squares them without a rule per component. Circles (50%)
51
- stay circles. The theme audit (scripts/theme-audit) fails on a corner
50
+ square look squares them without a rule per component. Circles are
51
+ min(50%, var(--wp-radius-cap, 999px)): round in Orbit, softened in Crisp,
52
+ square in Terminal and TUI (dots, radios, avatars, the timeline).
53
+ src/__tests__/corners.test.ts fails on a raw radius. The theme audit (scripts/theme-audit) fails on a corner
52
54
  rounder than the cap. */
53
55
  html[data-wp-look="crisp"] { --wp-radius-cap: 4px; }
54
56
  html[data-wp-look="terminal"],
@@ -362,10 +364,8 @@ html[data-wp-look="tui"] .wp-check:is([aria-checked="true"], [data-checked="true
362
364
  html[data-wp-look="tui"] .wp-check:is([aria-checked="mixed"], [data-indeterminate="true"]):not([data-checked="true"])::before { content: "[-]"; color: var(--wp-accent-text); }
363
365
  html[data-wp-look="tui"] .wp-page__title { font-size: 16px; font-weight: 700; letter-spacing: 0; }
364
366
  /* Radios read ( ) / (*) beside the [ ] / [x] checkboxes; the drawn dot
365
- hides. RadioGroup marks the picked option on the row (data-checked), the
366
- plain .wp-radio is a real input (:checked). */
367
- html[data-wp-look="tui"] .wp-radio-group__opt .wp-radio-group__dot,
368
- html[data-wp-look="tui"] .wp-radio {
367
+ hides. RadioGroup marks the picked option on the row (data-checked). */
368
+ html[data-wp-look="tui"] .wp-radio-group__opt .wp-radio-group__dot {
369
369
  width: auto;
370
370
  min-width: 3ch;
371
371
  height: auto;
@@ -381,19 +381,6 @@ html[data-wp-look="tui"] .wp-radio-group__opt[data-checked] .wp-radio-group__dot
381
381
  html[data-wp-look="tui"] .wp-radio-group__dot::before { content: "( )"; }
382
382
  html[data-wp-look="tui"] .wp-radio-group__opt[data-checked] .wp-radio-group__dot::before { content: "(*)"; color: var(--wp-accent-text); }
383
383
  html[data-wp-look="tui"] .wp-radio-group__opt[aria-disabled="true"][data-checked] .wp-radio-group__dot::before { color: var(--wp-text-dim); }
384
- html[data-wp-look="tui"] .wp-radio::before,
385
- html[data-wp-look="tui"] .wp-radio:disabled::before {
386
- content: "( )";
387
- width: auto;
388
- height: auto;
389
- border-radius: 0;
390
- background: transparent;
391
- transform: none;
392
- }
393
- html[data-wp-look="tui"] .wp-radio:checked::before { content: "(*)"; color: var(--wp-accent-text); }
394
- html[data-wp-look="tui"] .wp-radio:disabled:checked::before { content: "(*)"; color: var(--wp-text-dim); }
395
- html[data-wp-look="tui"] .wp-radio:checked,
396
- html[data-wp-look="tui"] .wp-radio:disabled:checked { background: transparent; }
397
384
 
398
385
  /* ================= Canvas previews ignore the look =================
399
386
  The canvas keeps ComfyUI's ground in every look (only the accent follows