@zeyos/zx 4.2.0 → 4.3.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 (52) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/README.md +5 -0
  3. package/dist/types/components/calendar/calendar.d.ts +19 -2
  4. package/dist/types/components/dialog/dialog.d.ts +6 -1
  5. package/dist/types/components/dropdown/dropdown.d.ts +5 -0
  6. package/dist/types/components/launcher/launcher.d.ts +5 -0
  7. package/dist/types/components/message/message.d.ts +9 -1
  8. package/dist/types/components/modal/modal.d.ts +44 -7
  9. package/dist/types/components/sheet/sheet.d.ts +22 -12
  10. package/dist/types/core/overlay-host.d.ts +12 -0
  11. package/dist/zx-zeyos.esm.js +138 -32
  12. package/dist/zx-zeyos.esm.min.js +1 -1
  13. package/dist/zx.css +259 -132
  14. package/dist/zx.esm.js +277 -82
  15. package/dist/zx.esm.min.js +3 -3
  16. package/dist/zx.global.js +277 -82
  17. package/dist/zx.global.min.js +3 -3
  18. package/dist/zx.min.css +1 -1
  19. package/docs/api.json +36 -0
  20. package/docs/llms.md +37 -18
  21. package/docs/llms.txt +1 -1
  22. package/package.json +1 -1
  23. package/src/components/account-menu/account-menu.css +1 -1
  24. package/src/components/app-rail/app-rail.css +1 -1
  25. package/src/components/calendar/calendar.css +66 -24
  26. package/src/components/calendar/calendar.js +114 -19
  27. package/src/components/context-menu/context-menu.css +2 -2
  28. package/src/components/context-menu/context-menu.js +5 -1
  29. package/src/components/date-picker/date-picker.css +18 -11
  30. package/src/components/datebox/date-range-box.css +4 -2
  31. package/src/components/datebox/datebox.css +4 -2
  32. package/src/components/dialog/dialog.css +4 -3
  33. package/src/components/dialog/dialog.js +2 -1
  34. package/src/components/dropdown/dropdown.css +4 -2
  35. package/src/components/dropdown/dropdown.js +7 -2
  36. package/src/components/launcher/launcher.css +10 -8
  37. package/src/components/launcher/launcher.js +9 -2
  38. package/src/components/menu-button/menu-button.css +2 -2
  39. package/src/components/message/message.css +7 -16
  40. package/src/components/message/message.js +17 -11
  41. package/src/components/modal/modal.css +6 -4
  42. package/src/components/modal/modal.js +99 -25
  43. package/src/components/select/select.css +9 -7
  44. package/src/components/sheet/sheet.css +25 -7
  45. package/src/components/sheet/sheet.js +43 -23
  46. package/src/components/table/table.css +5 -3
  47. package/src/components/tag-picker/tag-picker.css +5 -3
  48. package/src/components/tooltip/tooltip.css +4 -2
  49. package/src/components/tooltip/tooltip.js +4 -1
  50. package/src/core/overlay-host.js +23 -0
  51. package/styles/tokens/dark.css +4 -0
  52. package/styles/tokens/semantic.css +83 -8
package/styles/tokens/semantic.css CHANGED
@@ -70,10 +70,33 @@
70
70
  --zx-color-glass-chrome: color-mix(in srgb, var(--zx-color-bg-surface) 90%, transparent);
71
71
  --zx-color-glass-control: color-mix(in srgb, var(--zx-color-bg-control) 88%, transparent);
72
72
  --zx-color-glass-control-hover: color-mix(in srgb, var(--zx-color-bg-hover) 76%, var(--zx-color-glass-surface));
73
- /* Compact overlays can show more of the page; reading-sized panels stay quieter and more opaque. */
74
- --zx-color-overlay-surface: color-mix(in srgb, var(--zx-color-bg-raised) 88%, transparent);
75
- --zx-color-overlay-panel: color-mix(in srgb, var(--zx-color-bg-raised) 94%, transparent);
76
- --zx-color-overlay-border: color-mix(in srgb, var(--zx-color-border-strong) 72%, var(--zx-color-glass-highlight));
73
+ /* Overlay glass is composed from four roles: a neutral base, translucent colour, a restrained
74
+ reflection, and the backdrop behind modal panels. Keeping them separate makes the material
75
+ visibly react to Aurora/content without baking decoration into each component. */
76
+ --zx-color-overlay-base: var(--zx-color-bg-raised);
77
+ --zx-color-overlay-surface: color-mix(in srgb, var(--zx-color-overlay-base) 72%, transparent);
78
+ --zx-color-overlay-panel: color-mix(in srgb, var(--zx-color-overlay-base) 80%, transparent);
79
+ --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 28%, transparent);
80
+ --zx-color-overlay-border: color-mix(in srgb, var(--zx-color-text) 14%, transparent);
81
+ --zx-color-overlay-hover: color-mix(in srgb, var(--zx-color-text) 8%, transparent);
82
+ --zx-color-overlay-selected: color-mix(in srgb, var(--zx-color-accent) 18%, transparent);
83
+ --zx-color-overlay-divider: color-mix(in srgb, var(--zx-color-text) 11%, transparent);
84
+ --zx-color-overlay-scrim: color-mix(in srgb, var(--zx-color-overlay-base) 28%, transparent);
85
+ --zx-overlay-specular-strength: 48%;
86
+ --zx-overlay-surface-image: linear-gradient(145deg,
87
+ color-mix(in srgb, var(--zx-color-glass-highlight-strong) var(--zx-overlay-specular-strength), transparent) 0%,
88
+ color-mix(in srgb, var(--zx-color-glass-highlight) 16%, transparent) 28%,
89
+ transparent 54%), radial-gradient(120% 100% at 8% -12%,
90
+ color-mix(in srgb, var(--zx-color-accent) 8%, transparent), transparent 58%);
91
+ --zx-overlay-toast-image: radial-gradient(120% 160% at 0% 0%,
92
+ color-mix(in srgb, var(--zx-message-kind, var(--zx-color-info)) 18%, transparent), transparent 62%),
93
+ var(--zx-overlay-surface-image);
94
+ --zx-overlay-panel-image: radial-gradient(140% 100% at 0% 0%,
95
+ color-mix(in srgb, var(--zx-color-glass-highlight-strong) var(--zx-overlay-specular-strength), transparent) 0%,
96
+ transparent 58%), radial-gradient(100% 70% at 100% 0%,
97
+ color-mix(in srgb, var(--zx-color-accent) 5%, transparent), transparent 64%),
98
+ linear-gradient(180deg, color-mix(in srgb, var(--zx-color-glass-highlight) 16%, transparent) 0%,
99
+ transparent 28%);
77
100
  --zx-glass-blur: 8px;
78
101
  --zx-glass-saturation: 130%;
79
102
  --zx-glass-color-strength: 82%;
@@ -82,13 +105,15 @@
82
105
  --zx-glass-filter-control: blur(6px) saturate(116%);
83
106
  --zx-glass-filter-raised: blur(8px) saturate(120%);
84
107
  --zx-glass-filter-chrome: blur(10px) saturate(122%);
85
- --zx-glass-filter-overlay: blur(12px) saturate(128%);
86
- --zx-glass-filter-panel: blur(9px) saturate(120%);
108
+ --zx-glass-filter-overlay: blur(16px) saturate(140%);
109
+ --zx-glass-filter-panel: blur(14px) saturate(132%);
87
110
  --zx-app-icon-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 14%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 28%, transparent), 0 2px 6px color-mix(in srgb, var(--zx-color-app-icon-shade) 24%, transparent);
88
111
  --zx-app-icon-shadow-hover: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 20%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 32%, transparent), 0 4px 10px color-mix(in srgb, var(--zx-color-app-icon-shade) 30%, transparent);
89
112
  --zx-glass-control-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-shadow-1);
90
113
  --zx-glass-chrome-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 16%, transparent), var(--zx-shadow-1);
91
114
  --zx-glass-raised-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-overlay-shadow);
115
+ --zx-glass-overlay-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-color-glass-highlight-strong) 42%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--zx-color-glass-highlight) 20%, transparent), var(--zx-overlay-shadow);
116
+ --zx-glass-panel-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-color-glass-highlight-strong) 34%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--zx-color-glass-highlight) 14%, transparent), var(--zx-overlay-shadow);
92
117
  --zx-header-bg: var(--zx-gray-900);
93
118
  --zx-header-text: var(--zx-gray-50);
94
119
  }
@@ -97,13 +122,25 @@
97
122
  chrome outside a component stylesheet, receives the same deterministic opaque fallback. */
98
123
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
99
124
  :root,
100
- [data-zx-theme] {
125
+ .zx-scope,
126
+ [data-zx-theme],
127
+ [data-zx-density],
128
+ [data-zx-preset] {
101
129
  --zx-color-glass-chrome: var(--zx-color-bg-surface) !important;
102
130
  --zx-color-glass-surface: var(--zx-color-bg-raised) !important;
103
131
  --zx-color-glass-control: var(--zx-color-bg-control) !important;
104
132
  --zx-color-glass-control-hover: var(--zx-color-bg-hover) !important;
105
133
  --zx-color-overlay-surface: var(--zx-color-bg-raised) !important;
106
134
  --zx-color-overlay-panel: var(--zx-color-bg-raised) !important;
135
+ --zx-color-overlay-backdrop: var(--zx-color-bg-backdrop) !important;
136
+ --zx-color-overlay-hover: var(--zx-color-bg-hover) !important;
137
+ --zx-color-overlay-selected: var(--zx-color-bg-selected) !important;
138
+ --zx-color-overlay-divider: var(--zx-color-border) !important;
139
+ --zx-color-overlay-scrim: var(--zx-color-bg-raised) !important;
140
+ --zx-overlay-specular-strength: 0% !important;
141
+ --zx-overlay-surface-image: none !important;
142
+ --zx-overlay-toast-image: none !important;
143
+ --zx-overlay-panel-image: none !important;
107
144
  --zx-app-icon-core-strength: 68% !important;
108
145
  --zx-app-icon-rim-strength: 62% !important;
109
146
  --zx-app-icon-bloom-strength: 0% !important;
@@ -116,21 +153,59 @@
116
153
  --zx-glass-filter-chrome: none !important;
117
154
  --zx-glass-filter-overlay: none !important;
118
155
  --zx-glass-filter-panel: none !important;
156
+ --zx-glass-overlay-shadow: var(--zx-overlay-shadow) !important;
157
+ --zx-glass-panel-shadow: var(--zx-overlay-shadow) !important;
119
158
  }
120
159
  }
121
160
 
122
161
  @media (forced-colors: active) {
123
162
  :root,
124
- [data-zx-theme] {
163
+ .zx-scope,
164
+ [data-zx-theme],
165
+ [data-zx-density],
166
+ [data-zx-preset] {
125
167
  --zx-color-glass-chrome: Canvas !important;
126
168
  --zx-color-glass-surface: Canvas !important;
127
169
  --zx-color-glass-control: ButtonFace !important;
128
170
  --zx-color-glass-control-hover: Highlight !important;
129
171
  --zx-color-overlay-surface: Canvas !important;
130
172
  --zx-color-overlay-panel: Canvas !important;
173
+ --zx-color-overlay-backdrop: transparent !important;
131
174
  --zx-color-overlay-border: CanvasText !important;
175
+ --zx-color-overlay-hover: Highlight !important;
176
+ --zx-color-overlay-selected: Highlight !important;
177
+ --zx-color-overlay-divider: CanvasText !important;
178
+ --zx-color-overlay-scrim: Canvas !important;
179
+ --zx-overlay-specular-strength: 0% !important;
180
+ --zx-overlay-surface-image: none !important;
181
+ --zx-overlay-toast-image: none !important;
182
+ --zx-overlay-panel-image: none !important;
132
183
  --zx-glass-control-shadow: none !important;
133
184
  --zx-glass-chrome-shadow: none !important;
134
185
  --zx-glass-raised-shadow: none !important;
186
+ --zx-glass-filter-overlay: none !important;
187
+ --zx-glass-filter-panel: none !important;
188
+ --zx-glass-overlay-shadow: none !important;
189
+ --zx-glass-panel-shadow: none !important;
190
+ }
191
+ }
192
+
193
+ /* Browsers without backdrop filtering get an intentionally opaque material instead of a washed
194
+ translucent colour. This is a capability fallback, independent of user preference fallbacks. */
195
+ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
196
+ :root,
197
+ .zx-scope,
198
+ [data-zx-theme],
199
+ [data-zx-density],
200
+ [data-zx-preset] {
201
+ --zx-color-overlay-surface: var(--zx-color-bg-raised) !important;
202
+ --zx-color-overlay-panel: var(--zx-color-bg-raised) !important;
203
+ --zx-color-overlay-backdrop: var(--zx-color-bg-backdrop) !important;
204
+ --zx-overlay-specular-strength: 0% !important;
205
+ --zx-overlay-surface-image: none !important;
206
+ --zx-overlay-toast-image: none !important;
207
+ --zx-overlay-panel-image: none !important;
208
+ --zx-glass-filter-overlay: none !important;
209
+ --zx-glass-filter-panel: none !important;
135
210
  }
136
211
  }