@xenosystem/elements-react 0.0.3 → 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 -99
package/src/layout/ResizablePanel.css CHANGED
@@ -1,79 +1,79 @@
1
- /*
2
- * ResizablePanel — a fixed-width panel + a 4px draggable divider. CSS-first: `data-side` places the
3
- * handle, `data-dragging` locks the grab cursor + text selection during a drag, `data-availability`
4
- * carries the disabled axis. Monochrome shell: the handle rests on the hairline `--xeno-border` and
5
- * lifts to `--xeno-muted` on hover/focus. No literal colours, no hue.
6
- */
7
-
8
- .xeno-resizable {
9
- display: flex;
10
- align-items: stretch;
11
- min-height: 0;
12
- }
13
-
14
- /* While dragging, the grab cursor should persist even as the pointer leaves the 4px handle. */
15
- .xeno-resizable[data-dragging='true'] {
16
- cursor: col-resize;
17
- user-select: none;
18
- }
19
-
20
- /* The sized child — width is the only driven property; contents scroll within. */
21
- .xeno-resizable-panel {
22
- flex: 0 0 auto;
23
- min-width: 0;
24
- min-height: 0;
25
- overflow: auto;
26
- }
27
-
28
- /* The divider: a hairline strip that lifts on hover/focus. Rounded-square grammar (no circles). */
29
- .xeno-resizable-handle {
30
- position: relative;
31
- flex: 0 0 auto;
32
- align-self: stretch;
33
- width: 4px;
34
- padding: 0;
35
- border: none;
36
- border-radius: var(--xeno-radius-hair);
37
- background: var(--xeno-border);
38
- cursor: col-resize;
39
- touch-action: none;
40
- transition: background var(--xeno-dur) var(--xeno-ease);
41
- }
42
-
43
- /* Widen the pointer/press target beyond the 4px visual without shifting layout. */
44
- .xeno-resizable-handle::before {
45
- content: '';
46
- position: absolute;
47
- inset: 0 -4px;
48
- }
49
-
50
- .xeno-resizable-handle:hover {
51
- background: var(--xeno-muted);
52
- }
53
-
54
- .xeno-resizable-handle:focus-visible {
55
- outline: none;
56
- background: var(--xeno-muted);
57
- box-shadow:
58
- 0 0 0 2px var(--xeno-canvas),
59
- 0 0 0 4px var(--xeno-border);
60
- }
61
-
62
- /* Active drag reads a touch brighter than hover. */
63
- .xeno-resizable[data-dragging='true'] .xeno-resizable-handle {
64
- background: var(--xeno-active);
65
- }
66
-
67
- /* Disabled: inert hairline, not-allowed cursor, dimmed. */
68
- .xeno-resizable[data-availability='disabled'] .xeno-resizable-handle,
69
- .xeno-resizable-handle[data-availability='disabled'] {
70
- background: var(--xeno-border);
71
- cursor: not-allowed;
72
- opacity: 0.4;
73
- }
74
-
75
- @media (prefers-reduced-motion: reduce) {
76
- .xeno-resizable-handle {
77
- transition: none;
78
- }
79
- }
1
+ /*
2
+ * ResizablePanel — a fixed-width panel + a 4px draggable divider. CSS-first: `data-side` places the
3
+ * handle, `data-dragging` locks the grab cursor + text selection during a drag, `data-availability`
4
+ * carries the disabled axis. Monochrome shell: the handle rests on the hairline `--xeno-border` and
5
+ * lifts to `--xeno-muted` on hover/focus. No literal colours, no hue.
6
+ */
7
+
8
+ .xeno-resizable {
9
+ display: flex;
10
+ align-items: stretch;
11
+ min-height: 0;
12
+ }
13
+
14
+ /* While dragging, the grab cursor should persist even as the pointer leaves the 4px handle. */
15
+ .xeno-resizable[data-dragging='true'] {
16
+ cursor: col-resize;
17
+ user-select: none;
18
+ }
19
+
20
+ /* The sized child — width is the only driven property; contents scroll within. */
21
+ .xeno-resizable-panel {
22
+ flex: 0 0 auto;
23
+ min-width: 0;
24
+ min-height: 0;
25
+ overflow: auto;
26
+ }
27
+
28
+ /* The divider: a hairline strip that lifts on hover/focus. Rounded-square grammar (no circles). */
29
+ .xeno-resizable-handle {
30
+ position: relative;
31
+ flex: 0 0 auto;
32
+ align-self: stretch;
33
+ width: 4px;
34
+ padding: 0;
35
+ border: none;
36
+ border-radius: var(--xeno-radius-hair);
37
+ background: var(--xeno-border);
38
+ cursor: col-resize;
39
+ touch-action: none;
40
+ transition: background var(--xeno-dur) var(--xeno-ease);
41
+ }
42
+
43
+ /* Widen the pointer/press target beyond the 4px visual without shifting layout. */
44
+ .xeno-resizable-handle::before {
45
+ content: '';
46
+ position: absolute;
47
+ inset: 0 -4px;
48
+ }
49
+
50
+ .xeno-resizable-handle:hover {
51
+ background: var(--xeno-muted);
52
+ }
53
+
54
+ .xeno-resizable-handle:focus-visible {
55
+ outline: none;
56
+ background: var(--xeno-muted);
57
+ box-shadow:
58
+ 0 0 0 2px var(--xeno-canvas),
59
+ 0 0 0 4px var(--xeno-border);
60
+ }
61
+
62
+ /* Active drag reads a touch brighter than hover. */
63
+ .xeno-resizable[data-dragging='true'] .xeno-resizable-handle {
64
+ background: var(--xeno-active);
65
+ }
66
+
67
+ /* Disabled: inert hairline, not-allowed cursor, dimmed. */
68
+ .xeno-resizable[data-availability='disabled'] .xeno-resizable-handle,
69
+ .xeno-resizable-handle[data-availability='disabled'] {
70
+ background: var(--xeno-border);
71
+ cursor: not-allowed;
72
+ opacity: 0.4;
73
+ }
74
+
75
+ @media (prefers-reduced-motion: reduce) {
76
+ .xeno-resizable-handle {
77
+ transition: none;
78
+ }
79
+ }