@xenosystem/elements-react 0.0.1 → 0.0.2

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 (49) hide show
  1. package/LICENSE +18 -18
  2. package/README.md +41 -41
  3. package/package.json +58 -58
  4. package/src/chrome-separated.css +132 -132
  5. package/src/chrome-unified.css +72 -72
  6. package/src/containers/Badges.css +116 -116
  7. package/src/containers/avatar.css +70 -70
  8. package/src/containers/card.css +75 -75
  9. package/src/containers/chip.css +103 -103
  10. package/src/containers/list-row.css +132 -132
  11. package/src/containers/message-bubble.css +112 -112
  12. package/src/containers/panel.css +120 -120
  13. package/src/containers/table.css +102 -102
  14. package/src/containers/tile.css +17 -17
  15. package/src/content/callout.css +77 -77
  16. package/src/content/caret.css +30 -30
  17. package/src/content/code-block.css +159 -159
  18. package/src/content/collapsible.css +80 -80
  19. package/src/content/inline-code.css +14 -14
  20. package/src/content/model-picker.css +219 -219
  21. package/src/content/source-card.css +99 -99
  22. package/src/content/sources-disclosure.css +118 -118
  23. package/src/controls.css +453 -453
  24. package/src/fonts.css +34 -34
  25. package/src/forms/Checkbox.css +114 -114
  26. package/src/forms/RadioGroup.css +115 -115
  27. package/src/goo.css +97 -97
  28. package/src/icon-motion.css +1909 -1909
  29. package/src/layout/ResizablePanel.css +79 -79
  30. package/src/nav/sidebar.css +296 -296
  31. package/src/overlays/date-time-picker.css +238 -238
  32. package/src/overlays/menu.css +195 -195
  33. package/src/overlays/modal.css +167 -167
  34. package/src/overlays/picker-field.css +81 -81
  35. package/src/overlays/pill-filter.css +129 -129
  36. package/src/overlays/reveal.css +56 -56
  37. package/src/overlays/segmented-control.css +185 -185
  38. package/src/overlays/tabs.css +143 -143
  39. package/src/overlays/tooltip.css +126 -126
  40. package/src/scrollbar.css +184 -184
  41. package/src/size.css +179 -179
  42. package/src/status/progress-bar.css +88 -88
  43. package/src/status/spinner.css +33 -33
  44. package/src/status/statusindicator.css +65 -65
  45. package/src/status/steptimeline.css +137 -137
  46. package/src/status/thinkingcube.css +75 -75
  47. package/src/xeno-element.css +60 -60
  48. package/src/xeno-elements.css +71 -71
  49. package/src/xeno-theme.css +99 -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
+ }