@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/content/sources-disclosure.css CHANGED
@@ -1,118 +1,118 @@
1
- /*
2
- * <SourcesDisclosure> — a borderless disclosure header (chevron + "Sources" + favicon stack + mono count)
3
- * over a panel of <SourceCard> rows. Monochrome shell; only theme tokens; motion is transform/opacity.
4
- */
5
- .xeno-sources {
6
- display: flex;
7
- flex-direction: column;
8
- gap: 8px;
9
- }
10
-
11
- /* Header — BORDERLESS, full-width, a text button. */
12
- .xeno-sources-header {
13
- display: inline-flex;
14
- align-items: center;
15
- gap: 10px;
16
- width: 100%;
17
- padding: 6px 4px;
18
- background: transparent;
19
- border: none;
20
- border-radius: var(--xeno-radius-sm);
21
- color: var(--xeno-text);
22
- font: inherit;
23
- text-align: left;
24
- cursor: pointer;
25
- transition: color var(--xeno-dur) var(--xeno-ease);
26
- }
27
- .xeno-sources-header:hover {
28
- color: var(--xeno-active);
29
- }
30
- .xeno-sources-header:focus-visible {
31
- outline: none;
32
- box-shadow:
33
- 0 0 0 2px var(--xeno-canvas),
34
- 0 0 0 4px var(--xeno-border);
35
- }
36
-
37
- /* Chevron — points right when closed, down when open (root carries the seam). */
38
- .xeno-sources-chevron {
39
- display: inline-flex;
40
- flex: none;
41
- color: var(--xeno-muted);
42
- transform: rotate(-90deg);
43
- transition: transform var(--xeno-dur) var(--xeno-ease);
44
- }
45
- .xeno-sources[data-open] .xeno-sources-chevron {
46
- transform: rotate(0deg);
47
- }
48
-
49
- .xeno-sources-label {
50
- flex: none;
51
- color: var(--xeno-text);
52
- font-size: 14px;
53
- font-weight: 500;
54
- }
55
-
56
- /* Overlapping favicon stack — square tiles, -8px overlap, ringed against the surface. */
57
- .xeno-sources-stack {
58
- display: inline-flex;
59
- align-items: center;
60
- padding-left: 4px;
61
- }
62
- .xeno-sources-avatar {
63
- flex: none;
64
- display: inline-flex;
65
- align-items: center;
66
- justify-content: center;
67
- width: 20px;
68
- height: 20px;
69
- overflow: hidden;
70
- background: var(--xeno-control);
71
- border: 1px solid var(--xeno-surface);
72
- border-radius: var(--xeno-radius-sm);
73
- color: var(--xeno-muted);
74
- font-size: 10px;
75
- font-weight: 600;
76
- line-height: 1;
77
- user-select: none;
78
- }
79
- .xeno-sources-avatar + .xeno-sources-avatar {
80
- margin-left: -8px;
81
- }
82
- .xeno-sources-avatar img {
83
- display: block;
84
- width: 100%;
85
- height: 100%;
86
- object-fit: cover;
87
- }
88
- .xeno-sources-overflow {
89
- color: var(--xeno-muted);
90
- font-size: 9px;
91
- }
92
-
93
- /* Count — mono, muted, pushed to the far end. */
94
- .xeno-sources-count {
95
- margin-left: auto;
96
- color: var(--xeno-muted);
97
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
98
- font-size: 12px;
99
- font-variant-numeric: tabular-nums;
100
- }
101
-
102
- /* Panel — the expanded list of SourceCard rows. */
103
- .xeno-sources-panel {
104
- display: flex;
105
- flex-direction: column;
106
- gap: 8px;
107
- padding-left: 4px;
108
- }
109
- .xeno-sources-panel[hidden] {
110
- display: none;
111
- }
112
-
113
- @media (prefers-reduced-motion: reduce) {
114
- .xeno-sources-header,
115
- .xeno-sources-chevron {
116
- transition: none;
117
- }
118
- }
1
+ /*
2
+ * <SourcesDisclosure> — a borderless disclosure header (chevron + "Sources" + favicon stack + mono count)
3
+ * over a panel of <SourceCard> rows. Monochrome shell; only theme tokens; motion is transform/opacity.
4
+ */
5
+ .xeno-sources {
6
+ display: flex;
7
+ flex-direction: column;
8
+ gap: 8px;
9
+ }
10
+
11
+ /* Header — BORDERLESS, full-width, a text button. */
12
+ .xeno-sources-header {
13
+ display: inline-flex;
14
+ align-items: center;
15
+ gap: 10px;
16
+ width: 100%;
17
+ padding: 6px 4px;
18
+ background: transparent;
19
+ border: none;
20
+ border-radius: var(--xeno-radius-sm);
21
+ color: var(--xeno-text);
22
+ font: inherit;
23
+ text-align: left;
24
+ cursor: pointer;
25
+ transition: color var(--xeno-dur) var(--xeno-ease);
26
+ }
27
+ .xeno-sources-header:hover {
28
+ color: var(--xeno-active);
29
+ }
30
+ .xeno-sources-header:focus-visible {
31
+ outline: none;
32
+ box-shadow:
33
+ 0 0 0 2px var(--xeno-canvas),
34
+ 0 0 0 4px var(--xeno-border);
35
+ }
36
+
37
+ /* Chevron — points right when closed, down when open (root carries the seam). */
38
+ .xeno-sources-chevron {
39
+ display: inline-flex;
40
+ flex: none;
41
+ color: var(--xeno-muted-text);
42
+ transform: rotate(-90deg);
43
+ transition: transform var(--xeno-dur) var(--xeno-ease);
44
+ }
45
+ .xeno-sources[data-open] .xeno-sources-chevron {
46
+ transform: rotate(0deg);
47
+ }
48
+
49
+ .xeno-sources-label {
50
+ flex: none;
51
+ color: var(--xeno-text);
52
+ font-size: 14px;
53
+ font-weight: 500;
54
+ }
55
+
56
+ /* Overlapping favicon stack — square tiles, -8px overlap, ringed against the surface. */
57
+ .xeno-sources-stack {
58
+ display: inline-flex;
59
+ align-items: center;
60
+ padding-left: 4px;
61
+ }
62
+ .xeno-sources-avatar {
63
+ flex: none;
64
+ display: inline-flex;
65
+ align-items: center;
66
+ justify-content: center;
67
+ width: 20px;
68
+ height: 20px;
69
+ overflow: hidden;
70
+ background: var(--xeno-control);
71
+ border: 1px solid var(--xeno-surface);
72
+ border-radius: var(--xeno-radius-sm);
73
+ color: var(--xeno-muted-text);
74
+ font-size: 10px;
75
+ font-weight: 600;
76
+ line-height: 1;
77
+ user-select: none;
78
+ }
79
+ .xeno-sources-avatar + .xeno-sources-avatar {
80
+ margin-left: -8px;
81
+ }
82
+ .xeno-sources-avatar img {
83
+ display: block;
84
+ width: 100%;
85
+ height: 100%;
86
+ object-fit: cover;
87
+ }
88
+ .xeno-sources-overflow {
89
+ color: var(--xeno-muted-text);
90
+ font-size: 9px;
91
+ }
92
+
93
+ /* Count — mono, muted, pushed to the far end. */
94
+ .xeno-sources-count {
95
+ margin-left: auto;
96
+ color: var(--xeno-muted-text);
97
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
98
+ font-size: 12px;
99
+ font-variant-numeric: tabular-nums;
100
+ }
101
+
102
+ /* Panel — the expanded list of SourceCard rows. */
103
+ .xeno-sources-panel {
104
+ display: flex;
105
+ flex-direction: column;
106
+ gap: 8px;
107
+ padding-left: 4px;
108
+ }
109
+ .xeno-sources-panel[hidden] {
110
+ display: none;
111
+ }
112
+
113
+ @media (prefers-reduced-motion: reduce) {
114
+ .xeno-sources-header,
115
+ .xeno-sources-chevron {
116
+ transition: none;
117
+ }
118
+ }