@xenosystem/elements-react 0.0.1 → 0.0.3

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/content/source-card.css CHANGED
@@ -1,99 +1,99 @@
1
- /*
2
- * <SourceCard> — a link-embed row. Monochrome shell: card radius, hairline border, hover lifts the
3
- * border to --xeno-muted. Only theme tokens; motion is transform/opacity behind reduced-motion.
4
- */
5
- .xeno-source-card {
6
- display: flex;
7
- align-items: flex-start;
8
- gap: 12px;
9
- padding: 12px;
10
- background: var(--xeno-surface);
11
- border: 1px solid var(--xeno-border);
12
- border-radius: var(--xeno-radius-card);
13
- color: var(--xeno-text);
14
- text-decoration: none;
15
- transition:
16
- border-color var(--xeno-dur) var(--xeno-ease),
17
- background var(--xeno-dur) var(--xeno-ease);
18
- }
19
-
20
- a.xeno-source-card {
21
- cursor: pointer;
22
- }
23
- a.xeno-source-card:hover {
24
- border-color: var(--xeno-muted);
25
- background: var(--xeno-hover);
26
- }
27
- a.xeno-source-card:focus-visible {
28
- outline: none;
29
- box-shadow:
30
- 0 0 0 2px var(--xeno-canvas),
31
- 0 0 0 4px var(--xeno-border);
32
- }
33
-
34
- /* Leading tile — square rounded (radius-md), favicon or domain-initial placeholder. */
35
- .xeno-source-card-tile {
36
- flex: none;
37
- display: inline-flex;
38
- align-items: center;
39
- justify-content: center;
40
- width: 36px;
41
- height: 36px;
42
- overflow: hidden;
43
- background: var(--xeno-control);
44
- border: 1px solid var(--xeno-border);
45
- border-radius: var(--xeno-radius-md);
46
- color: var(--xeno-muted);
47
- font-size: 15px;
48
- font-weight: 600;
49
- line-height: 1;
50
- user-select: none;
51
- }
52
- .xeno-source-card-favicon {
53
- display: block;
54
- width: 100%;
55
- height: 100%;
56
- object-fit: cover;
57
- }
58
-
59
- .xeno-source-card-body {
60
- display: flex;
61
- flex: 1;
62
- min-width: 0;
63
- flex-direction: column;
64
- gap: 2px;
65
- }
66
- .xeno-source-card-title {
67
- overflow: hidden;
68
- color: var(--xeno-text);
69
- font-size: 14px;
70
- font-weight: 500;
71
- line-height: 1.35;
72
- white-space: nowrap;
73
- text-overflow: ellipsis;
74
- }
75
- .xeno-source-card-domain {
76
- overflow: hidden;
77
- color: var(--xeno-muted);
78
- font-size: 12px;
79
- line-height: 1.35;
80
- white-space: nowrap;
81
- text-overflow: ellipsis;
82
- }
83
- .xeno-source-card-snippet {
84
- display: -webkit-box;
85
- margin-top: 2px;
86
- overflow: hidden;
87
- color: var(--xeno-muted);
88
- font-size: 13px;
89
- line-height: 1.45;
90
- -webkit-line-clamp: 2;
91
- line-clamp: 2;
92
- -webkit-box-orient: vertical;
93
- }
94
-
95
- @media (prefers-reduced-motion: reduce) {
96
- .xeno-source-card {
97
- transition: none;
98
- }
99
- }
1
+ /*
2
+ * <SourceCard> — a link-embed row. Monochrome shell: card radius, hairline border, hover lifts the
3
+ * border to --xeno-muted. Only theme tokens; motion is transform/opacity behind reduced-motion.
4
+ */
5
+ .xeno-source-card {
6
+ display: flex;
7
+ align-items: flex-start;
8
+ gap: 12px;
9
+ padding: 12px;
10
+ background: var(--xeno-surface);
11
+ border: 1px solid var(--xeno-border);
12
+ border-radius: var(--xeno-radius-card);
13
+ color: var(--xeno-text);
14
+ text-decoration: none;
15
+ transition:
16
+ border-color var(--xeno-dur) var(--xeno-ease),
17
+ background var(--xeno-dur) var(--xeno-ease);
18
+ }
19
+
20
+ a.xeno-source-card {
21
+ cursor: pointer;
22
+ }
23
+ a.xeno-source-card:hover {
24
+ border-color: var(--xeno-muted);
25
+ background: var(--xeno-hover);
26
+ }
27
+ a.xeno-source-card:focus-visible {
28
+ outline: none;
29
+ box-shadow:
30
+ 0 0 0 2px var(--xeno-canvas),
31
+ 0 0 0 4px var(--xeno-border);
32
+ }
33
+
34
+ /* Leading tile — square rounded (radius-md), favicon or domain-initial placeholder. */
35
+ .xeno-source-card-tile {
36
+ flex: none;
37
+ display: inline-flex;
38
+ align-items: center;
39
+ justify-content: center;
40
+ width: 36px;
41
+ height: 36px;
42
+ overflow: hidden;
43
+ background: var(--xeno-control);
44
+ border: 1px solid var(--xeno-border);
45
+ border-radius: var(--xeno-radius-md);
46
+ color: var(--xeno-muted);
47
+ font-size: 15px;
48
+ font-weight: 600;
49
+ line-height: 1;
50
+ user-select: none;
51
+ }
52
+ .xeno-source-card-favicon {
53
+ display: block;
54
+ width: 100%;
55
+ height: 100%;
56
+ object-fit: cover;
57
+ }
58
+
59
+ .xeno-source-card-body {
60
+ display: flex;
61
+ flex: 1;
62
+ min-width: 0;
63
+ flex-direction: column;
64
+ gap: 2px;
65
+ }
66
+ .xeno-source-card-title {
67
+ overflow: hidden;
68
+ color: var(--xeno-text);
69
+ font-size: 14px;
70
+ font-weight: 500;
71
+ line-height: 1.35;
72
+ white-space: nowrap;
73
+ text-overflow: ellipsis;
74
+ }
75
+ .xeno-source-card-domain {
76
+ overflow: hidden;
77
+ color: var(--xeno-muted);
78
+ font-size: 12px;
79
+ line-height: 1.35;
80
+ white-space: nowrap;
81
+ text-overflow: ellipsis;
82
+ }
83
+ .xeno-source-card-snippet {
84
+ display: -webkit-box;
85
+ margin-top: 2px;
86
+ overflow: hidden;
87
+ color: var(--xeno-muted);
88
+ font-size: 13px;
89
+ line-height: 1.45;
90
+ -webkit-line-clamp: 2;
91
+ line-clamp: 2;
92
+ -webkit-box-orient: vertical;
93
+ }
94
+
95
+ @media (prefers-reduced-motion: reduce) {
96
+ .xeno-source-card {
97
+ transition: none;
98
+ }
99
+ }
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);
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
+ }