@openvoxproject/voxblocks 0.9.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 (97) hide show
  1. package/LICENSE +202 -0
  2. package/README.md +66 -0
  3. package/dist/cdn/voxblocks.css +1 -0
  4. package/dist/cdn/voxblocks.js +5057 -0
  5. package/dist/types/components/accordion/vox-accordion.d.ts +32 -0
  6. package/dist/types/components/alert/vox-alert.d.ts +23 -0
  7. package/dist/types/components/avatar/vox-avatar.d.ts +18 -0
  8. package/dist/types/components/badge/vox-badge.d.ts +17 -0
  9. package/dist/types/components/billboard/vox-billboard.d.ts +22 -0
  10. package/dist/types/components/breadcrumbs/vox-breadcrumbs.d.ts +24 -0
  11. package/dist/types/components/button/vox-button.d.ts +24 -0
  12. package/dist/types/components/calendar-tile/vox-calendar-tile.d.ts +18 -0
  13. package/dist/types/components/callout/vox-callout.d.ts +20 -0
  14. package/dist/types/components/card/vox-card.d.ts +28 -0
  15. package/dist/types/components/checkbox/vox-checkbox.d.ts +20 -0
  16. package/dist/types/components/cta/vox-cta.d.ts +17 -0
  17. package/dist/types/components/cta-band/vox-cta-band.d.ts +22 -0
  18. package/dist/types/components/dialog/vox-dialog.d.ts +30 -0
  19. package/dist/types/components/disclosure/vox-disclosure.d.ts +19 -0
  20. package/dist/types/components/dropdown/vox-dropdown.d.ts +29 -0
  21. package/dist/types/components/empty-state/vox-empty-state.d.ts +18 -0
  22. package/dist/types/components/file-input/vox-file-input.d.ts +22 -0
  23. package/dist/types/components/footer/vox-footer.d.ts +28 -0
  24. package/dist/types/components/grid/vox-grid.d.ts +22 -0
  25. package/dist/types/components/header/vox-header.d.ts +23 -0
  26. package/dist/types/components/hero/vox-hero.d.ts +21 -0
  27. package/dist/types/components/input/vox-input.d.ts +24 -0
  28. package/dist/types/components/input-group/vox-input-group.d.ts +25 -0
  29. package/dist/types/components/link-hub/vox-link-hub.d.ts +27 -0
  30. package/dist/types/components/loader/vox-loader.d.ts +16 -0
  31. package/dist/types/components/pagination/vox-pagination.d.ts +25 -0
  32. package/dist/types/components/quote/vox-quote.d.ts +18 -0
  33. package/dist/types/components/radio/vox-radio-group.d.ts +23 -0
  34. package/dist/types/components/radio/vox-radio.d.ts +21 -0
  35. package/dist/types/components/select/vox-select.d.ts +27 -0
  36. package/dist/types/components/series-nav/vox-series-nav.d.ts +18 -0
  37. package/dist/types/components/sidenav/vox-sidenav.d.ts +50 -0
  38. package/dist/types/components/sponsor/vox-sponsor.d.ts +35 -0
  39. package/dist/types/components/stat/vox-stat.d.ts +17 -0
  40. package/dist/types/components/step-indicator/vox-step-indicator.d.ts +28 -0
  41. package/dist/types/components/subnav/vox-subnav.d.ts +18 -0
  42. package/dist/types/components/switch/vox-switch.d.ts +20 -0
  43. package/dist/types/components/tabs/vox-tabs.d.ts +57 -0
  44. package/dist/types/components/textarea/vox-textarea.d.ts +22 -0
  45. package/dist/types/components/theme-toggle/vox-theme-toggle.d.ts +35 -0
  46. package/dist/types/components/timeline/vox-timeline.d.ts +27 -0
  47. package/dist/types/index.d.ts +51 -0
  48. package/dist/types/internal/field.d.ts +27 -0
  49. package/dist/voxblocks.css +1 -0
  50. package/dist/voxblocks.js +4350 -0
  51. package/package.json +59 -0
  52. package/src/components/accordion/vox-accordion.ts +150 -0
  53. package/src/components/alert/vox-alert.ts +155 -0
  54. package/src/components/avatar/vox-avatar.ts +80 -0
  55. package/src/components/badge/vox-badge.ts +67 -0
  56. package/src/components/billboard/vox-billboard.ts +109 -0
  57. package/src/components/breadcrumbs/vox-breadcrumbs.ts +68 -0
  58. package/src/components/button/vox-button.ts +165 -0
  59. package/src/components/calendar-tile/vox-calendar-tile.ts +74 -0
  60. package/src/components/callout/vox-callout.ts +97 -0
  61. package/src/components/card/vox-card.ts +147 -0
  62. package/src/components/checkbox/vox-checkbox.ts +101 -0
  63. package/src/components/cta/vox-cta.ts +69 -0
  64. package/src/components/cta-band/vox-cta-band.ts +105 -0
  65. package/src/components/dialog/vox-dialog.ts +176 -0
  66. package/src/components/disclosure/vox-disclosure.ts +98 -0
  67. package/src/components/dropdown/vox-dropdown.ts +186 -0
  68. package/src/components/empty-state/vox-empty-state.ts +76 -0
  69. package/src/components/file-input/vox-file-input.ts +127 -0
  70. package/src/components/footer/vox-footer.ts +109 -0
  71. package/src/components/grid/vox-grid.ts +54 -0
  72. package/src/components/header/vox-header.ts +109 -0
  73. package/src/components/hero/vox-hero.ts +100 -0
  74. package/src/components/input/vox-input.ts +72 -0
  75. package/src/components/input-group/vox-input-group.ts +85 -0
  76. package/src/components/link-hub/vox-link-hub.ts +108 -0
  77. package/src/components/loader/vox-loader.ts +82 -0
  78. package/src/components/pagination/vox-pagination.ts +76 -0
  79. package/src/components/quote/vox-quote.ts +82 -0
  80. package/src/components/radio/vox-radio-group.ts +117 -0
  81. package/src/components/radio/vox-radio.ts +102 -0
  82. package/src/components/select/vox-select.ts +89 -0
  83. package/src/components/series-nav/vox-series-nav.ts +94 -0
  84. package/src/components/sidenav/vox-sidenav.ts +192 -0
  85. package/src/components/sponsor/vox-sponsor.ts +187 -0
  86. package/src/components/stat/vox-stat.ts +55 -0
  87. package/src/components/step-indicator/vox-step-indicator.ts +152 -0
  88. package/src/components/subnav/vox-subnav.ts +64 -0
  89. package/src/components/switch/vox-switch.ts +90 -0
  90. package/src/components/tabs/vox-tabs.ts +201 -0
  91. package/src/components/textarea/vox-textarea.ts +75 -0
  92. package/src/components/theme-toggle/vox-theme-toggle.ts +164 -0
  93. package/src/components/timeline/vox-timeline.ts +100 -0
  94. package/src/index.ts +65 -0
  95. package/src/internal/field.ts +165 -0
  96. package/src/styles/utilities.css +409 -0
  97. package/src/tokens/tokens.css +161 -0
package/src/tokens/tokens.css ADDED
@@ -0,0 +1,161 @@
1
+ /**
2
+ * VoxBlocks design tokens.
3
+ *
4
+ * Load this stylesheet once at the document level; the custom properties
5
+ * inherit into every component's shadow DOM.
6
+ *
7
+ * "Deep Teal" — an OpenVox-specific identity chosen to move off the
8
+ * VitePress default indigo, and picked for how well an analogous
9
+ * blue-green family survives red-green colorblindness (the most common
10
+ * form) versus a warm or single-hue alternative. Because this no longer
11
+ * mirrors docs.openvoxproject.org's stock VitePress theme, components
12
+ * dropped into that site will look distinct from its current default
13
+ * styling until/unless that site adopts the same palette.
14
+ *
15
+ * Dark mode activates on `.dark` (VitePress convention) or
16
+ * `[data-vox-theme="dark"]` on any ancestor (usually <html>).
17
+ */
18
+
19
+ :root {
20
+ /* Brand (deep teal) — 1: text/links, 2: hover, 3: solid fills */
21
+ --vox-color-brand-1: #0f5c5c;
22
+ --vox-color-brand-2: #0a4f49;
23
+ --vox-color-brand-3: #106b66;
24
+ --vox-color-brand-soft: rgba(16, 107, 102, 0.14);
25
+
26
+ /* Semantic */
27
+ --vox-color-tip-1: #18794e;
28
+ --vox-color-tip-soft: rgba(16, 185, 129, 0.14);
29
+ --vox-color-warning-1: #915930;
30
+ --vox-color-warning-soft: rgba(234, 179, 8, 0.14);
31
+ --vox-color-danger-1: #b8272c;
32
+ --vox-color-danger-2: #d5393e;
33
+ --vox-color-danger-3: #e0575b;
34
+ --vox-color-danger-soft: rgba(244, 63, 94, 0.14);
35
+
36
+ /* Surfaces */
37
+ --vox-color-bg: #f5faf9;
38
+ --vox-color-bg-alt: #e8f1ef;
39
+ --vox-color-bg-soft: #e8f1ef;
40
+ --vox-color-bg-elv: #ffffff;
41
+
42
+ /* Text */
43
+ --vox-color-text-1: #12262c;
44
+ --vox-color-text-2: #4c6469;
45
+ --vox-color-text-3: #86999c;
46
+ --vox-color-text-inverse: #ffffff;
47
+
48
+ /* Lines */
49
+ --vox-color-divider: rgba(18, 38, 44, 0.12);
50
+ --vox-color-border: rgba(18, 38, 44, 0.28);
51
+
52
+ /* Typography */
53
+ --vox-font-family-base: 'Inter', ui-sans-serif, system-ui, -apple-system,
54
+ 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
55
+ --vox-font-family-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
56
+ --vox-font-family-mono: 'JetBrains Mono', 'Source Code Pro', ui-monospace,
57
+ 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono',
58
+ 'Courier New', monospace;
59
+
60
+ /* Shape */
61
+ --vox-radius-sm: 4px;
62
+ --vox-radius-md: 8px;
63
+ --vox-radius-lg: 12px;
64
+ --vox-radius-full: 9999px;
65
+
66
+ /* Spacing */
67
+ --vox-space-1: 0.25rem;
68
+ --vox-space-2: 0.5rem;
69
+ --vox-space-3: 0.75rem;
70
+ --vox-space-4: 1rem;
71
+ --vox-space-6: 1.5rem;
72
+ --vox-space-8: 2rem;
73
+
74
+ /* Elevation */
75
+ --vox-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
76
+ --vox-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
77
+
78
+ /* Motion */
79
+ --vox-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
80
+ --vox-transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
81
+ }
82
+
83
+ .dark,
84
+ [data-vox-theme='dark'] {
85
+ --vox-color-brand-1: #7fd8cf;
86
+ --vox-color-brand-2: #0b5c52;
87
+ --vox-color-brand-3: #0e7267;
88
+ --vox-color-brand-soft: rgba(127, 216, 207, 0.16);
89
+
90
+ --vox-color-tip-1: #3dd68c;
91
+ --vox-color-tip-soft: rgba(16, 185, 129, 0.16);
92
+ --vox-color-warning-1: #f9b44e;
93
+ --vox-color-warning-soft: rgba(234, 179, 8, 0.16);
94
+ --vox-color-danger-1: #f66f81;
95
+ --vox-color-danger-2: #f14158;
96
+ --vox-color-danger-3: #b62a3c;
97
+ --vox-color-danger-soft: rgba(244, 63, 94, 0.16);
98
+
99
+ --vox-color-bg: #0d1417;
100
+ --vox-color-bg-alt: #131b1f;
101
+ --vox-color-bg-soft: #131b1f;
102
+ --vox-color-bg-elv: #161f23;
103
+
104
+ --vox-color-text-1: #dff3f0;
105
+ --vox-color-text-2: #9fb8bb;
106
+ --vox-color-text-3: #5f7275;
107
+ --vox-color-text-inverse: #ffffff;
108
+
109
+ --vox-color-divider: rgba(159, 184, 187, 0.24);
110
+ --vox-color-border: rgba(159, 184, 187, 0.5);
111
+
112
+ --vox-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.24);
113
+ --vox-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.26), 0 1px 4px rgba(0, 0, 0, 0.26);
114
+ }
115
+
116
+ /**
117
+ * Base document reset. Every consuming site was writing this exact rule
118
+ * itself (margin reset, base font, page background/text color) — since
119
+ * tokens.css already loads once at the document level, it belongs here
120
+ * instead of being copy-pasted per site.
121
+ */
122
+ body {
123
+ margin: 0;
124
+ font-family: var(--vox-font-family-base);
125
+ background-color: var(--vox-color-bg);
126
+ color: var(--vox-color-text-1);
127
+ }
128
+
129
+ /**
130
+ * Links nested inside slotted prose (e.g. an <a> inside a <p> passed into
131
+ * vox-hero's default slot) can't be reached by a component's own
132
+ * `::slotted()` rules — that selector only matches nodes assigned directly
133
+ * to the slot, not their descendants. Left unstyled, such links fall back
134
+ * to the browser's default :link/:visited colors, which don't track the
135
+ * dark theme and can fail contrast. These light-DOM rules style them from
136
+ * the outside instead.
137
+ *
138
+ * Deliberately NOT a bare `a` selector: tokens.css is loaded once at the
139
+ * document level, which in a site like the VitePress docs also includes
140
+ * that site's own pre-existing chrome (nav bar, sidebar, home hero) — a
141
+ * blanket `a` rule reaches those too and forces an underline onto
142
+ * navigation that was never supposed to have one. Scoping to these five
143
+ * components (plus the opt-in `.vox-prose` utility, see utilities.css)
144
+ * keeps this to content a site actually handed to VoxBlocks.
145
+ */
146
+ vox-hero a,
147
+ vox-alert a,
148
+ vox-callout a,
149
+ vox-dialog a,
150
+ vox-accordion-item a {
151
+ color: var(--vox-color-brand-1);
152
+ text-decoration: underline;
153
+ }
154
+
155
+ vox-hero a:hover,
156
+ vox-alert a:hover,
157
+ vox-callout a:hover,
158
+ vox-dialog a:hover,
159
+ vox-accordion-item a:hover {
160
+ color: var(--vox-color-brand-2);
161
+ }