@f-ewald/components 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 (81) hide show
  1. package/README.md +27 -0
  2. package/custom-elements.json +3290 -835
  3. package/dist/chat-message.d.ts +39 -0
  4. package/dist/chat-message.d.ts.map +1 -0
  5. package/dist/chat-message.js +155 -0
  6. package/dist/chat-message.js.map +1 -0
  7. package/dist/data-table.d.ts +39 -0
  8. package/dist/data-table.d.ts.map +1 -0
  9. package/dist/data-table.js +119 -0
  10. package/dist/data-table.js.map +1 -0
  11. package/dist/editable-text.d.ts +52 -0
  12. package/dist/editable-text.d.ts.map +1 -0
  13. package/dist/editable-text.js +224 -0
  14. package/dist/editable-text.js.map +1 -0
  15. package/dist/form-select.d.ts +40 -0
  16. package/dist/form-select.d.ts.map +1 -0
  17. package/dist/form-select.js +236 -0
  18. package/dist/form-select.js.map +1 -0
  19. package/dist/gallery-item-variant.d.ts +21 -0
  20. package/dist/gallery-item-variant.d.ts.map +1 -0
  21. package/dist/gallery-item-variant.js +44 -0
  22. package/dist/gallery-item-variant.js.map +1 -0
  23. package/dist/gallery-item.d.ts +28 -0
  24. package/dist/gallery-item.d.ts.map +1 -0
  25. package/dist/gallery-item.js +54 -0
  26. package/dist/gallery-item.js.map +1 -0
  27. package/dist/icons.d.ts +7 -0
  28. package/dist/icons.d.ts.map +1 -1
  29. package/dist/icons.js +7 -0
  30. package/dist/icons.js.map +1 -1
  31. package/dist/index.d.ts +13 -1
  32. package/dist/index.d.ts.map +1 -1
  33. package/dist/index.js +13 -1
  34. package/dist/index.js.map +1 -1
  35. package/dist/live-timer.d.ts +31 -0
  36. package/dist/live-timer.d.ts.map +1 -0
  37. package/dist/live-timer.js +78 -0
  38. package/dist/live-timer.js.map +1 -0
  39. package/dist/photo-gallery.d.ts +117 -0
  40. package/dist/photo-gallery.d.ts.map +1 -0
  41. package/dist/photo-gallery.js +620 -0
  42. package/dist/photo-gallery.js.map +1 -0
  43. package/dist/popover-panel.d.ts +34 -0
  44. package/dist/popover-panel.d.ts.map +1 -0
  45. package/dist/popover-panel.js +173 -0
  46. package/dist/popover-panel.js.map +1 -0
  47. package/dist/status-pill.d.ts +24 -0
  48. package/dist/status-pill.d.ts.map +1 -0
  49. package/dist/status-pill.js +101 -0
  50. package/dist/status-pill.js.map +1 -0
  51. package/dist/tile-grid.d.ts +32 -0
  52. package/dist/tile-grid.d.ts.map +1 -0
  53. package/dist/tile-grid.js +102 -0
  54. package/dist/tile-grid.js.map +1 -0
  55. package/dist/tokens.css +39 -0
  56. package/dist/tokens.d.ts +28 -3
  57. package/dist/tokens.d.ts.map +1 -1
  58. package/dist/tokens.js +42 -43
  59. package/dist/tokens.js.map +1 -1
  60. package/dist/user-avatar.d.ts +5 -2
  61. package/dist/user-avatar.d.ts.map +1 -1
  62. package/dist/user-avatar.js +22 -6
  63. package/dist/user-avatar.js.map +1 -1
  64. package/dist/utils/duration.d.ts +12 -0
  65. package/dist/utils/duration.d.ts.map +1 -0
  66. package/dist/utils/duration.js +27 -0
  67. package/dist/utils/duration.js.map +1 -0
  68. package/docs/chat-message.md +59 -0
  69. package/docs/data-table.md +63 -0
  70. package/docs/editable-text.md +51 -0
  71. package/docs/form-select.md +64 -0
  72. package/docs/gallery-item-variant.md +37 -0
  73. package/docs/gallery-item.md +47 -0
  74. package/docs/live-timer.md +39 -0
  75. package/docs/photo-gallery.md +77 -0
  76. package/docs/popover-panel.md +66 -0
  77. package/docs/status-pill.md +43 -0
  78. package/docs/tile-grid.md +58 -0
  79. package/docs/user-avatar.md +1 -1
  80. package/llms.txt +280 -1
  81. package/package.json +1 -1
package/README.md CHANGED
@@ -44,14 +44,23 @@ import "@f-ewald/components/roman-numeral.js";
44
44
  | `<address-autocomplete>` | [docs/address-autocomplete.md](./docs/address-autocomplete.md) |
45
45
  | `<animate-confetti>` | [docs/animate-confetti.md](./docs/animate-confetti.md) |
46
46
  | `<autocomplete-input>` | [docs/autocomplete-input.md](./docs/autocomplete-input.md) |
47
+ | `<chat-message>` | [docs/chat-message.md](./docs/chat-message.md) |
47
48
  | `<confirm-dialog>` | [docs/confirm-dialog.md](./docs/confirm-dialog.md) |
48
49
  | `<copy-link-button>` | [docs/copy-link-button.md](./docs/copy-link-button.md) |
50
+ | `<data-table>` | [docs/data-table.md](./docs/data-table.md) |
49
51
  | `<distance-value>` | [docs/distance-value.md](./docs/distance-value.md) |
50
52
  | `<distribution-chart>` | [docs/distribution-chart.md](./docs/distribution-chart.md) |
53
+ | `<editable-text>` | [docs/editable-text.md](./docs/editable-text.md) |
54
+ | `<form-select>` | [docs/form-select.md](./docs/form-select.md) |
55
+ | `<gallery-item>` | [docs/gallery-item.md](./docs/gallery-item.md) |
56
+ | `<gallery-item-variant>` | [docs/gallery-item-variant.md](./docs/gallery-item-variant.md) |
57
+ | `<live-timer>` | [docs/live-timer.md](./docs/live-timer.md) |
51
58
  | `<map-circle>` | [docs/map-circle.md](./docs/map-circle.md) |
52
59
  | `<map-pin>` | [docs/map-pin.md](./docs/map-pin.md) |
53
60
  | `<map-point>` | [docs/map-point.md](./docs/map-point.md) |
54
61
  | `<percent-bar-chart>` | [docs/percent-bar-chart.md](./docs/percent-bar-chart.md) |
62
+ | `<photo-gallery>` | [docs/photo-gallery.md](./docs/photo-gallery.md) |
63
+ | `<popover-panel>` | [docs/popover-panel.md](./docs/popover-panel.md) |
55
64
  | `<price-history-chart>` | [docs/price-history-chart.md](./docs/price-history-chart.md) |
56
65
  | `<radio-cards>` | [docs/radio-cards.md](./docs/radio-cards.md) |
57
66
  | `<radio-pills>` | [docs/radio-pills.md](./docs/radio-pills.md) |
@@ -60,6 +69,8 @@ import "@f-ewald/components/roman-numeral.js";
60
69
  | `<roman-numeral>` | [docs/roman-numeral.md](./docs/roman-numeral.md) |
61
70
  | `<slide-panel>` | [docs/slide-panel.md](./docs/slide-panel.md) |
62
71
  | `<stat-meter>` | [docs/stat-meter.md](./docs/stat-meter.md) |
72
+ | `<status-pill>` | [docs/status-pill.md](./docs/status-pill.md) |
73
+ | `<tile-grid>` | [docs/tile-grid.md](./docs/tile-grid.md) |
63
74
  | `<toast-notification>` | [docs/toast-notification.md](./docs/toast-notification.md) |
64
75
  | `<ui-button>` | [docs/ui-button.md](./docs/ui-button.md) |
65
76
  | `<user-avatar>` | [docs/user-avatar.md](./docs/user-avatar.md) |
@@ -91,6 +102,22 @@ Or import the generated stylesheet as a starting point and edit it:
91
102
  import "@f-ewald/components/tokens.css";
92
103
  ```
93
104
 
105
+ ### Dark mode
106
+
107
+ `tokens.css` also ships a dark palette (see `darkTokenValues` in
108
+ [`src/tokens.ts`](./src/tokens.ts)), applied automatically via
109
+ `@media (prefers-color-scheme: dark)`. A consumer can force either mode
110
+ regardless of the OS preference by setting `data-theme="dark"` or
111
+ `data-theme="light"` on `<html>` — that attribute wins in both directions.
112
+ Components need no changes to support this: every token is read via
113
+ `var(--ui-x, fallback)` at its point of use, so it just follows whatever
114
+ `:root` resolves to. (Note: `tokens` — the `:host` stylesheet component
115
+ files import alongside their own `css` block — intentionally declares no
116
+ custom properties itself; an earlier version re-declared them there as
117
+ `--ui-x: var(--ui-x, fallback)`, which computed to the guaranteed-invalid
118
+ value instead of the inherited one, silently discarding whatever `:root`
119
+ set. Don't reintroduce that pattern.)
120
+
94
121
  The full token set is defined in [`src/tokens.ts`](./src/tokens.ts).
95
122
 
96
123
  ## Playground / development