@ai-matrx/design-system 0.8.0 → 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.
- package/CHANGELOG.md +68 -0
- package/README.md +2 -0
- package/dist/index.cjs +325 -311
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +52 -2
- package/dist/index.d.ts +52 -2
- package/dist/index.js +290 -276
- package/dist/index.js.map +1 -1
- package/dist/styles.css +40 -0
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -190,6 +190,46 @@
|
|
|
190
190
|
}
|
|
191
191
|
}
|
|
192
192
|
|
|
193
|
+
/* Collapsible open/close. The SAME rule as the accordion above and a separate
|
|
194
|
+
one on purpose: Radix publishes a DIFFERENT measured variable per primitive
|
|
195
|
+
(`--radix-collapsible-content-height`), and the whole reason this ships here
|
|
196
|
+
is that two matrx-frontend collapsibles reached for the ACCORDION keyframes
|
|
197
|
+
and therefore interpolated to a variable that is never set on a collapsible
|
|
198
|
+
— no animation, no error, for as long as they existed (census row 19f).
|
|
199
|
+
Six more used host-only `slide-down`/`slide-up` keyframes that were keyed
|
|
200
|
+
correctly and existed in exactly one app's globals.css: the same C26 silent
|
|
201
|
+
host contract, wearing a working coat. One duration (200ms) for both
|
|
202
|
+
primitives, so a collapsible and an accordion on the same screen agree.
|
|
203
|
+
Colourless and inert until an element carries the class. */
|
|
204
|
+
@keyframes matrx-collapsible-down {
|
|
205
|
+
from {
|
|
206
|
+
height: 0;
|
|
207
|
+
}
|
|
208
|
+
to {
|
|
209
|
+
height: var(--radix-collapsible-content-height);
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
@keyframes matrx-collapsible-up {
|
|
213
|
+
from {
|
|
214
|
+
height: var(--radix-collapsible-content-height);
|
|
215
|
+
}
|
|
216
|
+
to {
|
|
217
|
+
height: 0;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
.matrx-collapsible-content[data-state="open"] {
|
|
221
|
+
animation: matrx-collapsible-down 200ms ease-out;
|
|
222
|
+
}
|
|
223
|
+
.matrx-collapsible-content[data-state="closed"] {
|
|
224
|
+
animation: matrx-collapsible-up 200ms ease-out;
|
|
225
|
+
}
|
|
226
|
+
@media (prefers-reduced-motion: reduce) {
|
|
227
|
+
.matrx-collapsible-content[data-state="open"],
|
|
228
|
+
.matrx-collapsible-content[data-state="closed"] {
|
|
229
|
+
animation: none;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
|
|
193
233
|
/* ────────────────────────────────────────────────────────────────────────
|
|
194
234
|
Scroll fade — the "there is more below" cue. UNLAYERED on purpose.
|
|
195
235
|
Driven by `useScrollFade`, which sets the data attributes ONLY on edges
|
package/package.json
CHANGED