@xenosystem/elements-react 0.0.4 → 0.0.5

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 (51) hide show
  1. package/LICENSE +18 -18
  2. package/README.md +41 -41
  3. package/dist/containers/Chip.js +1 -1
  4. package/dist/containers/Panel.js +1 -1
  5. package/package.json +58 -58
  6. package/src/chrome-separated.css +132 -132
  7. package/src/chrome-unified.css +72 -72
  8. package/src/containers/Badges.css +116 -116
  9. package/src/containers/avatar.css +70 -70
  10. package/src/containers/card.css +75 -75
  11. package/src/containers/chip.css +103 -103
  12. package/src/containers/list-row.css +132 -132
  13. package/src/containers/message-bubble.css +112 -112
  14. package/src/containers/panel.css +125 -120
  15. package/src/containers/table.css +102 -102
  16. package/src/containers/tile.css +17 -17
  17. package/src/content/callout.css +77 -77
  18. package/src/content/caret.css +30 -30
  19. package/src/content/code-block.css +159 -159
  20. package/src/content/collapsible.css +80 -80
  21. package/src/content/inline-code.css +14 -14
  22. package/src/content/model-picker.css +219 -219
  23. package/src/content/source-card.css +99 -99
  24. package/src/content/sources-disclosure.css +118 -118
  25. package/src/controls.css +453 -453
  26. package/src/fonts.css +34 -34
  27. package/src/forms/Checkbox.css +114 -114
  28. package/src/forms/RadioGroup.css +115 -115
  29. package/src/goo.css +97 -97
  30. package/src/icon-motion.css +1909 -1909
  31. package/src/layout/ResizablePanel.css +79 -79
  32. package/src/nav/sidebar.css +296 -296
  33. package/src/overlays/date-time-picker.css +238 -238
  34. package/src/overlays/menu.css +195 -195
  35. package/src/overlays/modal.css +167 -167
  36. package/src/overlays/picker-field.css +81 -81
  37. package/src/overlays/pill-filter.css +129 -129
  38. package/src/overlays/reveal.css +56 -56
  39. package/src/overlays/segmented-control.css +185 -185
  40. package/src/overlays/tabs.css +143 -143
  41. package/src/overlays/tooltip.css +126 -126
  42. package/src/scrollbar.css +184 -184
  43. package/src/size.css +179 -179
  44. package/src/status/progress-bar.css +88 -88
  45. package/src/status/spinner.css +33 -33
  46. package/src/status/statusindicator.css +65 -65
  47. package/src/status/steptimeline.css +137 -137
  48. package/src/status/thinkingcube.css +75 -75
  49. package/src/xeno-element.css +60 -60
  50. package/src/xeno-elements.css +71 -71
  51. package/src/xeno-theme.css +112 -112
package/src/scrollbar.css CHANGED
@@ -1,184 +1,184 @@
1
- /*
2
- * The XENO scrollbar.
3
- *
4
- * A scrollbar is the one control the user does not summon: it appears because there is more, and it
5
- * has to say so without becoming furniture. XENO's answer is to not draw it at all until you are in
6
- * the region — and then to draw it properly, as an instrument with a rail, rather than as a lone mark
7
- * floating in space. Three states:
8
- *
9
- * idle NOTHING. The gutter is reserved but nothing is painted.
10
- * container hovered the rail appears — a hairline track with a thumb riding it
11
- * thumb hovered brightest, and thicker, and it stays that way while you drag
12
- *
13
- * The rail is the half people get wrong. A thumb alone, arriving out of nowhere, reads as a stray
14
- * mark; the same thumb sitting on a track reads as a control that was always there and simply became
15
- * visible. It also gives the thumb something to be measured against — you can see how much document a
16
- * drag covers, which a floating bar never tells you.
17
- *
18
- * The gutter is reserved even while nothing is drawn, so appearing costs no reflow: the content does
19
- * not shift sideways the moment your pointer enters.
20
- *
21
- * ## What it cannot do
22
- *
23
- * It appears rather than FADES in. The pseudo-elements below take no transitions in any engine that
24
- * implements them, so hiding and showing is a snap either way. A true fade — and a bar that also wakes
25
- * on a keyboard scroll, where there is no pointer to hover — needs the overlay model: a real element
26
- * over the content, positioned from `scrollTop`. That costs a listener per scroll container and a
27
- * component wrapping every one of them, which is not a trade this library makes for its default.
28
- * The playground's Scrollbar gallery has that version standing next to this one.
29
- *
30
- * ## The two engines are mutually exclusive — this is the part that bites
31
- *
32
- * There are two ways to style a scrollbar and they cannot be combined. `scrollbar-width` /
33
- * `scrollbar-color` are the standard properties, and since Chrome 121 setting EITHER of them makes the
34
- * `::-webkit-scrollbar` pseudo-elements be ignored on that element. Declare both and Blink silently
35
- * drops the detailed version, which is exactly how a stylesheet ends up with a thumb that has no
36
- * corner radius and no hover state despite ten lines asking for them.
37
- *
38
- * So they are branched on `@supports selector(::-webkit-scrollbar)`: the pseudo-elements where they
39
- * exist (Blink, WebKit), the standard properties where they do not (Gecko). Firefox gets the colours
40
- * and the thin width; it does not get the radius or the growth, because the standard properties cannot
41
- * express them.
42
- *
43
- * ## Scope
44
- *
45
- * Only inside `.xeno`. A component library has no business restyling the host page's scrollbars, and a
46
- * consumer who does want them can opt in by putting `.xeno-scroll` on `<html>` (with the tokens in
47
- * scope). Everything is wrapped in `:where()`, so the specificity is zero and any component can
48
- * override it by naming its own class — see the time picker, which only re-declares the SIZE token.
49
- */
50
-
51
- /* ---- Gecko: the standard properties, on their own ----------------------------
52
- `scrollbar-color` cannot express a rail, so Firefox gets the hover gating and the colours and
53
- nothing else: absent at rest, thumb-on-a-faint-track when you are in the region. */
54
- @supports not selector(::-webkit-scrollbar) {
55
- :where(.xeno, .xeno *, .xeno-scroll) {
56
- scrollbar-width: thin;
57
- scrollbar-color: transparent transparent;
58
- }
59
- :where(.xeno, .xeno *, .xeno-scroll):hover {
60
- scrollbar-color: var(--xeno-scroll-thumb-hover) var(--xeno-scroll-rail);
61
- }
62
- }
63
-
64
- /* ---- Blink / WebKit: the pseudo-elements ------------------------------------- */
65
- @supports selector(::-webkit-scrollbar) {
66
- :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar {
67
- width: var(--xeno-scroll-size);
68
- height: var(--xeno-scroll-size);
69
- }
70
- /* The stepper arrows are a relic; nothing in the system has them. */
71
- :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-button {
72
- display: none;
73
- }
74
-
75
- /* ---- Idle: the gutter is there, nothing is painted in it ---- */
76
- :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-track,
77
- :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-corner,
78
- :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb {
79
- background-color: transparent;
80
- }
81
-
82
- /*
83
- * Both pieces are drawn the same way: a transparent border plus `background-clip: padding-box`
84
- * insets the paint without anything having to be positioned. The border is what sets the WIDTH —
85
- * 5px of border on a 12px gutter leaves a 2px rail, 3px leaves a 6px thumb, and 2px leaves the 8px
86
- * the thumb grows to under the pointer. Because only the border changes, the gutter never does, so
87
- * nothing reflows at any point.
88
- *
89
- * Radius is `--xeno-radius-hair` (1.5px of 6px, 25%), plus the border so the outer edge stays true.
90
- * `--xeno-radius-xs` would be half the thumb's own width — a capsule with semicircular ends, and
91
- * the grammar has no circles in it.
92
- */
93
- :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-track,
94
- :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb {
95
- background-clip: padding-box;
96
- border: solid transparent;
97
- }
98
- /* The rail is square. Its painted strip is only 2px wide, where `--xeno-radius-hair` would be 75%
99
- of the width — semicircular ends. The radius here is exactly the border, so the PAINTED corner
100
- comes out at zero. */
101
- :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-track {
102
- border-width: var(--xeno-scroll-rail-pad);
103
- border-radius: var(--xeno-scroll-rail-pad);
104
- }
105
- :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb {
106
- border-width: var(--xeno-scroll-pad);
107
- border-radius: calc(var(--xeno-radius-hair, 1.5px) + var(--xeno-scroll-pad));
108
- min-height: 28px; /* never let a long document shrink the grab target to nothing */
109
- }
110
-
111
- /* ---- In the region: the rail arrives, with the thumb on it ---- */
112
- :where(.xeno, .xeno *, .xeno-scroll):hover::-webkit-scrollbar-track {
113
- background-color: var(--xeno-scroll-rail);
114
- }
115
- :where(.xeno, .xeno *, .xeno-scroll):hover::-webkit-scrollbar-thumb {
116
- background-color: var(--xeno-scroll-thumb-hover);
117
- }
118
-
119
- /* ---- On the thumb: brightest, and thicker, and it holds while you drag ---- */
120
- :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb:hover,
121
- :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb:active {
122
- background-color: var(--xeno-scroll-thumb-active);
123
- border-width: var(--xeno-scroll-pad-hover);
124
- }
125
- }
126
-
127
- /*
128
- * ## `.xeno-scroll-wake` — for a scroller where `:hover` means nothing
129
- *
130
- * The document element is hovered whenever the pointer is anywhere in the window, so gating the page's
131
- * own bar on hover leaves it permanently on — the opposite of the intent. This variant gates on
132
- * ACTIVITY instead: it shows while `data-scrolling` is present and hides when it is gone.
133
- *
134
- * That one attribute is the app's job, because it is the only part a stylesheet cannot observe. Set it
135
- * on scroll, drop it a beat after the last event:
136
- *
137
- * let idle
138
- * addEventListener('scroll', () => {
139
- * root.setAttribute('data-scrolling', '')
140
- * clearTimeout(idle)
141
- * idle = setTimeout(() => root.removeAttribute('data-scrolling'), 600)
142
- * }, { passive: true })
143
- *
144
- * Pointing at the gutter still reveals the thumb even while idle — an invisible thumb still occupies
145
- * its track, so going for it deliberately works.
146
- */
147
- @supports selector(::-webkit-scrollbar) {
148
- .xeno-scroll-wake:not([data-scrolling])::-webkit-scrollbar-track,
149
- .xeno-scroll-wake:not([data-scrolling])::-webkit-scrollbar-thumb {
150
- background-color: transparent;
151
- }
152
- .xeno-scroll-wake[data-scrolling]::-webkit-scrollbar-track {
153
- background-color: var(--xeno-scroll-rail);
154
- }
155
- .xeno-scroll-wake[data-scrolling]::-webkit-scrollbar-thumb {
156
- background-color: var(--xeno-scroll-thumb-hover);
157
- }
158
- /* Under the pointer still wins, exactly as everywhere else. */
159
- .xeno-scroll-wake::-webkit-scrollbar-thumb:hover,
160
- .xeno-scroll-wake::-webkit-scrollbar-thumb:active {
161
- background-color: var(--xeno-scroll-thumb-active);
162
- border-width: var(--xeno-scroll-pad-hover);
163
- }
164
- }
165
- @supports not selector(::-webkit-scrollbar) {
166
- .xeno-scroll-wake:not([data-scrolling]) {
167
- scrollbar-color: transparent transparent;
168
- }
169
- .xeno-scroll-wake[data-scrolling] {
170
- scrollbar-color: var(--xeno-scroll-thumb-hover) var(--xeno-scroll-rail);
171
- }
172
- }
173
-
174
- /*
175
- * Opt-in: reserve the gutter so content does not jump sideways the moment it becomes scrollable. Not
176
- * on by default — it costs the width permanently, which is wrong in a narrow panel and right in a long
177
- * document. `stable both-edges` keeps the centring honest when the content is centred.
178
- */
179
- .xeno-scroll-gutter {
180
- scrollbar-gutter: stable;
181
- }
182
- .xeno-scroll-gutter-both {
183
- scrollbar-gutter: stable both-edges;
184
- }
1
+ /*
2
+ * The XENO scrollbar.
3
+ *
4
+ * A scrollbar is the one control the user does not summon: it appears because there is more, and it
5
+ * has to say so without becoming furniture. XENO's answer is to not draw it at all until you are in
6
+ * the region — and then to draw it properly, as an instrument with a rail, rather than as a lone mark
7
+ * floating in space. Three states:
8
+ *
9
+ * idle NOTHING. The gutter is reserved but nothing is painted.
10
+ * container hovered the rail appears — a hairline track with a thumb riding it
11
+ * thumb hovered brightest, and thicker, and it stays that way while you drag
12
+ *
13
+ * The rail is the half people get wrong. A thumb alone, arriving out of nowhere, reads as a stray
14
+ * mark; the same thumb sitting on a track reads as a control that was always there and simply became
15
+ * visible. It also gives the thumb something to be measured against — you can see how much document a
16
+ * drag covers, which a floating bar never tells you.
17
+ *
18
+ * The gutter is reserved even while nothing is drawn, so appearing costs no reflow: the content does
19
+ * not shift sideways the moment your pointer enters.
20
+ *
21
+ * ## What it cannot do
22
+ *
23
+ * It appears rather than FADES in. The pseudo-elements below take no transitions in any engine that
24
+ * implements them, so hiding and showing is a snap either way. A true fade — and a bar that also wakes
25
+ * on a keyboard scroll, where there is no pointer to hover — needs the overlay model: a real element
26
+ * over the content, positioned from `scrollTop`. That costs a listener per scroll container and a
27
+ * component wrapping every one of them, which is not a trade this library makes for its default.
28
+ * The playground's Scrollbar gallery has that version standing next to this one.
29
+ *
30
+ * ## The two engines are mutually exclusive — this is the part that bites
31
+ *
32
+ * There are two ways to style a scrollbar and they cannot be combined. `scrollbar-width` /
33
+ * `scrollbar-color` are the standard properties, and since Chrome 121 setting EITHER of them makes the
34
+ * `::-webkit-scrollbar` pseudo-elements be ignored on that element. Declare both and Blink silently
35
+ * drops the detailed version, which is exactly how a stylesheet ends up with a thumb that has no
36
+ * corner radius and no hover state despite ten lines asking for them.
37
+ *
38
+ * So they are branched on `@supports selector(::-webkit-scrollbar)`: the pseudo-elements where they
39
+ * exist (Blink, WebKit), the standard properties where they do not (Gecko). Firefox gets the colours
40
+ * and the thin width; it does not get the radius or the growth, because the standard properties cannot
41
+ * express them.
42
+ *
43
+ * ## Scope
44
+ *
45
+ * Only inside `.xeno`. A component library has no business restyling the host page's scrollbars, and a
46
+ * consumer who does want them can opt in by putting `.xeno-scroll` on `<html>` (with the tokens in
47
+ * scope). Everything is wrapped in `:where()`, so the specificity is zero and any component can
48
+ * override it by naming its own class — see the time picker, which only re-declares the SIZE token.
49
+ */
50
+
51
+ /* ---- Gecko: the standard properties, on their own ----------------------------
52
+ `scrollbar-color` cannot express a rail, so Firefox gets the hover gating and the colours and
53
+ nothing else: absent at rest, thumb-on-a-faint-track when you are in the region. */
54
+ @supports not selector(::-webkit-scrollbar) {
55
+ :where(.xeno, .xeno *, .xeno-scroll) {
56
+ scrollbar-width: thin;
57
+ scrollbar-color: transparent transparent;
58
+ }
59
+ :where(.xeno, .xeno *, .xeno-scroll):hover {
60
+ scrollbar-color: var(--xeno-scroll-thumb-hover) var(--xeno-scroll-rail);
61
+ }
62
+ }
63
+
64
+ /* ---- Blink / WebKit: the pseudo-elements ------------------------------------- */
65
+ @supports selector(::-webkit-scrollbar) {
66
+ :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar {
67
+ width: var(--xeno-scroll-size);
68
+ height: var(--xeno-scroll-size);
69
+ }
70
+ /* The stepper arrows are a relic; nothing in the system has them. */
71
+ :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-button {
72
+ display: none;
73
+ }
74
+
75
+ /* ---- Idle: the gutter is there, nothing is painted in it ---- */
76
+ :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-track,
77
+ :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-corner,
78
+ :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb {
79
+ background-color: transparent;
80
+ }
81
+
82
+ /*
83
+ * Both pieces are drawn the same way: a transparent border plus `background-clip: padding-box`
84
+ * insets the paint without anything having to be positioned. The border is what sets the WIDTH —
85
+ * 5px of border on a 12px gutter leaves a 2px rail, 3px leaves a 6px thumb, and 2px leaves the 8px
86
+ * the thumb grows to under the pointer. Because only the border changes, the gutter never does, so
87
+ * nothing reflows at any point.
88
+ *
89
+ * Radius is `--xeno-radius-hair` (1.5px of 6px, 25%), plus the border so the outer edge stays true.
90
+ * `--xeno-radius-xs` would be half the thumb's own width — a capsule with semicircular ends, and
91
+ * the grammar has no circles in it.
92
+ */
93
+ :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-track,
94
+ :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb {
95
+ background-clip: padding-box;
96
+ border: solid transparent;
97
+ }
98
+ /* The rail is square. Its painted strip is only 2px wide, where `--xeno-radius-hair` would be 75%
99
+ of the width — semicircular ends. The radius here is exactly the border, so the PAINTED corner
100
+ comes out at zero. */
101
+ :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-track {
102
+ border-width: var(--xeno-scroll-rail-pad);
103
+ border-radius: var(--xeno-scroll-rail-pad);
104
+ }
105
+ :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb {
106
+ border-width: var(--xeno-scroll-pad);
107
+ border-radius: calc(var(--xeno-radius-hair, 1.5px) + var(--xeno-scroll-pad));
108
+ min-height: 28px; /* never let a long document shrink the grab target to nothing */
109
+ }
110
+
111
+ /* ---- In the region: the rail arrives, with the thumb on it ---- */
112
+ :where(.xeno, .xeno *, .xeno-scroll):hover::-webkit-scrollbar-track {
113
+ background-color: var(--xeno-scroll-rail);
114
+ }
115
+ :where(.xeno, .xeno *, .xeno-scroll):hover::-webkit-scrollbar-thumb {
116
+ background-color: var(--xeno-scroll-thumb-hover);
117
+ }
118
+
119
+ /* ---- On the thumb: brightest, and thicker, and it holds while you drag ---- */
120
+ :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb:hover,
121
+ :where(.xeno, .xeno *, .xeno-scroll)::-webkit-scrollbar-thumb:active {
122
+ background-color: var(--xeno-scroll-thumb-active);
123
+ border-width: var(--xeno-scroll-pad-hover);
124
+ }
125
+ }
126
+
127
+ /*
128
+ * ## `.xeno-scroll-wake` — for a scroller where `:hover` means nothing
129
+ *
130
+ * The document element is hovered whenever the pointer is anywhere in the window, so gating the page's
131
+ * own bar on hover leaves it permanently on — the opposite of the intent. This variant gates on
132
+ * ACTIVITY instead: it shows while `data-scrolling` is present and hides when it is gone.
133
+ *
134
+ * That one attribute is the app's job, because it is the only part a stylesheet cannot observe. Set it
135
+ * on scroll, drop it a beat after the last event:
136
+ *
137
+ * let idle
138
+ * addEventListener('scroll', () => {
139
+ * root.setAttribute('data-scrolling', '')
140
+ * clearTimeout(idle)
141
+ * idle = setTimeout(() => root.removeAttribute('data-scrolling'), 600)
142
+ * }, { passive: true })
143
+ *
144
+ * Pointing at the gutter still reveals the thumb even while idle — an invisible thumb still occupies
145
+ * its track, so going for it deliberately works.
146
+ */
147
+ @supports selector(::-webkit-scrollbar) {
148
+ .xeno-scroll-wake:not([data-scrolling])::-webkit-scrollbar-track,
149
+ .xeno-scroll-wake:not([data-scrolling])::-webkit-scrollbar-thumb {
150
+ background-color: transparent;
151
+ }
152
+ .xeno-scroll-wake[data-scrolling]::-webkit-scrollbar-track {
153
+ background-color: var(--xeno-scroll-rail);
154
+ }
155
+ .xeno-scroll-wake[data-scrolling]::-webkit-scrollbar-thumb {
156
+ background-color: var(--xeno-scroll-thumb-hover);
157
+ }
158
+ /* Under the pointer still wins, exactly as everywhere else. */
159
+ .xeno-scroll-wake::-webkit-scrollbar-thumb:hover,
160
+ .xeno-scroll-wake::-webkit-scrollbar-thumb:active {
161
+ background-color: var(--xeno-scroll-thumb-active);
162
+ border-width: var(--xeno-scroll-pad-hover);
163
+ }
164
+ }
165
+ @supports not selector(::-webkit-scrollbar) {
166
+ .xeno-scroll-wake:not([data-scrolling]) {
167
+ scrollbar-color: transparent transparent;
168
+ }
169
+ .xeno-scroll-wake[data-scrolling] {
170
+ scrollbar-color: var(--xeno-scroll-thumb-hover) var(--xeno-scroll-rail);
171
+ }
172
+ }
173
+
174
+ /*
175
+ * Opt-in: reserve the gutter so content does not jump sideways the moment it becomes scrollable. Not
176
+ * on by default — it costs the width permanently, which is wrong in a narrow panel and right in a long
177
+ * document. `stable both-edges` keeps the centring honest when the content is centred.
178
+ */
179
+ .xeno-scroll-gutter {
180
+ scrollbar-gutter: stable;
181
+ }
182
+ .xeno-scroll-gutter-both {
183
+ scrollbar-gutter: stable both-edges;
184
+ }