@entropix/react 0.2.0 → 0.3.0

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 (16) hide show
  1. package/dist/index.css +1015 -970
  2. package/dist/index.css.map +1 -1
  3. package/dist/styles/accordion.css +56 -54
  4. package/dist/styles/button.css +115 -113
  5. package/dist/styles/checkbox.css +101 -93
  6. package/dist/styles/dialog.css +88 -86
  7. package/dist/styles/index.css +3 -0
  8. package/dist/styles/input.css +144 -133
  9. package/dist/styles/layout.css +105 -103
  10. package/dist/styles/menu.css +51 -49
  11. package/dist/styles/radio.css +105 -98
  12. package/dist/styles/select.css +125 -120
  13. package/dist/styles/switch.css +44 -42
  14. package/dist/styles/tabs.css +70 -68
  15. package/dist/styles/toggle.css +40 -38
  16. package/package.json +2 -2
package/dist/styles/input.css CHANGED
@@ -1,167 +1,178 @@
1
1
  /* Input & Textarea — @entropix/react */
2
2
 
3
- .entropix-input-wrapper {
4
- display: flex;
5
- flex-direction: column;
6
- gap: var(--entropix-spacing-1);
7
- width: 100%;
8
- }
9
-
10
- /* === Label === */
3
+ @layer entropix {
4
+ .entropix-input-wrapper {
5
+ --input-border-color: var(--entropix-color-border-default);
6
+ --input-border-radius: var(--entropix-radius-md);
7
+ --input-bg: var(--entropix-color-bg-primary);
8
+ --input-font-size: var(--entropix-font-size-sm);
9
+ --input-padding-y: var(--entropix-spacing-2);
10
+ --input-padding-x: var(--entropix-spacing-3);
11
+ --input-focus-color: var(--entropix-color-border-focus);
12
+ --input-error-color: var(--entropix-color-border-danger);
13
+
14
+ display: flex;
15
+ flex-direction: column;
16
+ gap: var(--entropix-spacing-1);
17
+ width: 100%;
18
+ }
11
19
 
12
- .entropix-input-label {
13
- display: block;
14
- font-family: var(--entropix-font-family-sans);
15
- font-size: var(--entropix-font-size-sm);
16
- font-weight: var(--entropix-font-weight-medium);
17
- color: var(--entropix-color-text-primary);
18
- line-height: var(--entropix-line-height-normal);
19
- }
20
+ /* === Label === */
20
21
 
21
- .entropix-input-required {
22
- color: var(--entropix-color-text-danger);
23
- margin-left: var(--entropix-spacing-1);
24
- }
22
+ .entropix-input-label {
23
+ display: block;
24
+ font-family: var(--entropix-font-family-sans);
25
+ font-size: var(--entropix-font-size-sm);
26
+ font-weight: var(--entropix-font-weight-medium);
27
+ color: var(--entropix-color-text-primary);
28
+ line-height: var(--entropix-line-height-normal);
29
+ }
25
30
 
26
- /* === Shared Input / Textarea base === */
27
-
28
- .entropix-input,
29
- .entropix-textarea {
30
- display: block;
31
- width: 100%;
32
- border: 1px solid var(--entropix-color-border-default);
33
- border-radius: var(--entropix-radius-md);
34
- background: var(--entropix-color-bg-primary);
35
- color: var(--entropix-color-text-primary);
36
- font-family: var(--entropix-font-family-sans);
37
- font-size: var(--entropix-font-size-sm);
38
- line-height: var(--entropix-line-height-normal);
39
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
40
- transition:
41
- border-color var(--entropix-duration-fast) var(--entropix-easing-default),
42
- box-shadow var(--entropix-duration-fast) var(--entropix-easing-default),
43
- background var(--entropix-duration-fast) var(--entropix-easing-default);
44
- }
31
+ .entropix-input-required {
32
+ color: var(--entropix-color-text-danger);
33
+ margin-left: var(--entropix-spacing-1);
34
+ }
45
35
 
46
- .entropix-input::placeholder,
47
- .entropix-textarea::placeholder {
48
- color: var(--entropix-color-text-tertiary);
49
- }
36
+ /* === Shared Input / Textarea base === */
50
37
 
51
- /* === Focus === */
38
+ .entropix-input,
39
+ .entropix-textarea {
40
+ display: block;
41
+ width: 100%;
42
+ border: 1px solid var(--input-border-color);
43
+ border-radius: var(--input-border-radius);
44
+ background: var(--input-bg);
45
+ color: var(--entropix-color-text-primary);
46
+ font-family: var(--entropix-font-family-sans);
47
+ font-size: var(--input-font-size);
48
+ line-height: var(--entropix-line-height-normal);
49
+ padding: var(--input-padding-y) var(--input-padding-x);
50
+ transition:
51
+ border-color var(--entropix-duration-fast) var(--entropix-easing-default),
52
+ box-shadow var(--entropix-duration-fast) var(--entropix-easing-default),
53
+ background var(--entropix-duration-fast) var(--entropix-easing-default);
54
+ }
52
55
 
53
- .entropix-input:focus,
54
- .entropix-textarea:focus {
55
- outline: none;
56
- border-color: var(--entropix-color-border-focus);
57
- box-shadow: 0 0 0 1px var(--entropix-color-border-focus);
58
- }
56
+ .entropix-input::placeholder,
57
+ .entropix-textarea::placeholder {
58
+ color: var(--entropix-color-text-tertiary);
59
+ }
59
60
 
60
- .entropix-input:focus-visible,
61
- .entropix-textarea:focus-visible {
62
- outline: 2px solid var(--entropix-color-border-focus);
63
- outline-offset: 2px;
64
- }
61
+ /* === Focus === */
65
62
 
66
- /* === Hover === */
63
+ .entropix-input:focus,
64
+ .entropix-textarea:focus {
65
+ outline: none;
66
+ border-color: var(--input-focus-color);
67
+ box-shadow: 0 0 0 1px var(--input-focus-color);
68
+ }
67
69
 
68
- .entropix-input:hover:not(:disabled):not(:focus),
69
- .entropix-textarea:hover:not(:disabled):not(:focus) {
70
- border-color: var(--entropix-color-border-hover);
71
- }
70
+ .entropix-input:focus-visible,
71
+ .entropix-textarea:focus-visible {
72
+ outline: 2px solid var(--input-focus-color);
73
+ outline-offset: 2px;
74
+ }
72
75
 
73
- /* === Variants === */
76
+ /* === Hover === */
74
77
 
75
- .entropix-input[data-variant="filled"],
76
- .entropix-textarea[data-variant="filled"] {
77
- background: var(--entropix-color-bg-secondary);
78
- border-color: transparent;
79
- }
78
+ .entropix-input:hover:not(:disabled):not(:focus),
79
+ .entropix-textarea:hover:not(:disabled):not(:focus) {
80
+ border-color: var(--entropix-color-border-hover);
81
+ }
80
82
 
81
- .entropix-input[data-variant="filled"]:focus,
82
- .entropix-textarea[data-variant="filled"]:focus {
83
- background: var(--entropix-color-bg-primary);
84
- border-color: var(--entropix-color-border-focus);
85
- }
83
+ /* === Variants === */
86
84
 
87
- /* === Sizes === */
85
+ .entropix-input[data-variant="filled"],
86
+ .entropix-textarea[data-variant="filled"] {
87
+ background: var(--entropix-color-bg-secondary);
88
+ border-color: transparent;
89
+ }
88
90
 
89
- .entropix-input[data-size="sm"],
90
- .entropix-textarea[data-size="sm"] {
91
- padding: var(--entropix-spacing-1) var(--entropix-spacing-2);
92
- font-size: var(--entropix-font-size-xs);
93
- border-radius: var(--entropix-radius-sm);
94
- }
91
+ .entropix-input[data-variant="filled"]:focus,
92
+ .entropix-textarea[data-variant="filled"]:focus {
93
+ background: var(--input-bg);
94
+ border-color: var(--input-focus-color);
95
+ }
95
96
 
96
- .entropix-input[data-size="md"],
97
- .entropix-textarea[data-size="md"] {
98
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
99
- font-size: var(--entropix-font-size-sm);
100
- }
97
+ /* === Sizes === */
101
98
 
102
- .entropix-input[data-size="lg"],
103
- .entropix-textarea[data-size="lg"] {
104
- padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
105
- font-size: var(--entropix-font-size-base);
106
- border-radius: var(--entropix-radius-lg);
107
- }
99
+ .entropix-input[data-size="sm"],
100
+ .entropix-textarea[data-size="sm"] {
101
+ padding: var(--entropix-spacing-1) var(--entropix-spacing-2);
102
+ font-size: var(--entropix-font-size-xs);
103
+ border-radius: var(--entropix-radius-sm);
104
+ }
108
105
 
109
- /* === States === */
106
+ .entropix-input[data-size="md"],
107
+ .entropix-textarea[data-size="md"] {
108
+ padding: var(--input-padding-y) var(--input-padding-x);
109
+ font-size: var(--input-font-size);
110
+ }
110
111
 
111
- .entropix-input[data-state="invalid"],
112
- .entropix-textarea[data-state="invalid"] {
113
- border-color: var(--entropix-color-border-danger);
114
- }
112
+ .entropix-input[data-size="lg"],
113
+ .entropix-textarea[data-size="lg"] {
114
+ padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
115
+ font-size: var(--entropix-font-size-base);
116
+ border-radius: var(--entropix-radius-lg);
117
+ }
115
118
 
116
- .entropix-input[data-state="invalid"]:focus,
117
- .entropix-textarea[data-state="invalid"]:focus {
118
- border-color: var(--entropix-color-border-danger);
119
- box-shadow: 0 0 0 1px var(--entropix-color-border-danger);
120
- }
119
+ /* === States === */
121
120
 
122
- .entropix-input:disabled,
123
- .entropix-textarea:disabled,
124
- .entropix-input[data-state="disabled"],
125
- .entropix-textarea[data-state="disabled"] {
126
- opacity: 0.5;
127
- cursor: not-allowed;
128
- pointer-events: none;
129
- }
121
+ .entropix-input[data-state="invalid"],
122
+ .entropix-textarea[data-state="invalid"] {
123
+ border-color: var(--input-error-color);
124
+ }
130
125
 
131
- /* === Helper & Error text === */
126
+ .entropix-input[data-state="invalid"]:focus,
127
+ .entropix-textarea[data-state="invalid"]:focus {
128
+ border-color: var(--input-error-color);
129
+ box-shadow: 0 0 0 1px var(--input-error-color);
130
+ }
132
131
 
133
- .entropix-input-helper {
134
- font-family: var(--entropix-font-family-sans);
135
- font-size: var(--entropix-font-size-xs);
136
- color: var(--entropix-color-text-secondary);
137
- line-height: var(--entropix-line-height-normal);
138
- }
132
+ .entropix-input:disabled,
133
+ .entropix-textarea:disabled,
134
+ .entropix-input[data-state="disabled"],
135
+ .entropix-textarea[data-state="disabled"] {
136
+ opacity: 0.5;
137
+ cursor: not-allowed;
138
+ pointer-events: none;
139
+ }
139
140
 
140
- .entropix-input-error {
141
- font-family: var(--entropix-font-family-sans);
142
- font-size: var(--entropix-font-size-xs);
143
- color: var(--entropix-color-text-danger);
144
- line-height: var(--entropix-line-height-normal);
145
- }
141
+ /* === Helper & Error text === */
146
142
 
147
- /* === Textarea specific === */
143
+ .entropix-input-helper {
144
+ font-family: var(--entropix-font-family-sans);
145
+ font-size: var(--entropix-font-size-xs);
146
+ color: var(--entropix-color-text-secondary);
147
+ line-height: var(--entropix-line-height-normal);
148
+ }
148
149
 
149
- .entropix-textarea {
150
- min-height: 80px;
151
- }
150
+ .entropix-input-error {
151
+ font-family: var(--entropix-font-family-sans);
152
+ font-size: var(--entropix-font-size-xs);
153
+ color: var(--entropix-color-text-danger);
154
+ line-height: var(--entropix-line-height-normal);
155
+ }
152
156
 
153
- /* === Responsive — Touch-friendly sizing on mobile === */
157
+ /* === Textarea specific === */
154
158
 
155
- @media (max-width: 767px) {
156
- .entropix-input,
157
159
  .entropix-textarea {
158
- min-height: 44px;
159
- font-size: var(--entropix-font-size-base);
160
+ min-height: 80px;
160
161
  }
161
162
 
162
- .entropix-input[data-size="sm"],
163
- .entropix-textarea[data-size="sm"] {
164
- min-height: 36px;
165
- font-size: var(--entropix-font-size-sm);
163
+ /* === Responsive — Touch-friendly sizing on mobile === */
164
+
165
+ @media (max-width: 767px) {
166
+ .entropix-input,
167
+ .entropix-textarea {
168
+ min-height: 44px;
169
+ font-size: var(--entropix-font-size-base);
170
+ }
171
+
172
+ .entropix-input[data-size="sm"],
173
+ .entropix-textarea[data-size="sm"] {
174
+ min-height: 36px;
175
+ font-size: var(--entropix-font-size-sm);
176
+ }
166
177
  }
167
178
  }
package/dist/styles/layout.css CHANGED
@@ -1,125 +1,127 @@
1
1
  /* Layout Primitives — @entropix/react */
2
2
 
3
- /* === Stack (vertical flex layout) === */
3
+ @layer entropix {
4
+ /* === Stack (vertical flex layout) === */
4
5
 
5
- .entropix-stack {
6
- display: flex;
7
- flex-direction: column;
8
- gap: var(--entropix-space-layout-stack);
9
- }
6
+ .entropix-stack {
7
+ display: flex;
8
+ flex-direction: column;
9
+ gap: var(--entropix-space-layout-stack);
10
+ }
10
11
 
11
- .entropix-stack--gap-none { gap: 0; }
12
- .entropix-stack--gap-xs { gap: var(--entropix-spacing-1); }
13
- .entropix-stack--gap-sm { gap: var(--entropix-spacing-2); }
14
- .entropix-stack--gap-md { gap: var(--entropix-spacing-4); }
15
- .entropix-stack--gap-lg { gap: var(--entropix-spacing-6); }
16
- .entropix-stack--gap-xl { gap: var(--entropix-spacing-8); }
17
- .entropix-stack--gap-2xl { gap: var(--entropix-spacing-12); }
12
+ .entropix-stack--gap-none { gap: 0; }
13
+ .entropix-stack--gap-xs { gap: var(--entropix-spacing-1); }
14
+ .entropix-stack--gap-sm { gap: var(--entropix-spacing-2); }
15
+ .entropix-stack--gap-md { gap: var(--entropix-spacing-4); }
16
+ .entropix-stack--gap-lg { gap: var(--entropix-spacing-6); }
17
+ .entropix-stack--gap-xl { gap: var(--entropix-spacing-8); }
18
+ .entropix-stack--gap-2xl { gap: var(--entropix-spacing-12); }
18
19
 
19
- .entropix-stack--align-start { align-items: flex-start; }
20
- .entropix-stack--align-center { align-items: center; }
21
- .entropix-stack--align-end { align-items: flex-end; }
22
- .entropix-stack--align-stretch { align-items: stretch; }
20
+ .entropix-stack--align-start { align-items: flex-start; }
21
+ .entropix-stack--align-center { align-items: center; }
22
+ .entropix-stack--align-end { align-items: flex-end; }
23
+ .entropix-stack--align-stretch { align-items: stretch; }
23
24
 
24
- .entropix-stack--full-width { width: 100%; }
25
+ .entropix-stack--full-width { width: 100%; }
25
26
 
26
- /* === Inline (horizontal flex layout) === */
27
+ /* === Inline (horizontal flex layout) === */
27
28
 
28
- .entropix-inline {
29
- display: flex;
30
- flex-direction: row;
31
- align-items: center;
32
- gap: var(--entropix-space-layout-inline);
33
- }
29
+ .entropix-inline {
30
+ display: flex;
31
+ flex-direction: row;
32
+ align-items: center;
33
+ gap: var(--entropix-space-layout-inline);
34
+ }
34
35
 
35
- .entropix-inline--gap-none { gap: 0; }
36
- .entropix-inline--gap-xs { gap: var(--entropix-spacing-1); }
37
- .entropix-inline--gap-sm { gap: var(--entropix-spacing-2); }
38
- .entropix-inline--gap-md { gap: var(--entropix-spacing-4); }
39
- .entropix-inline--gap-lg { gap: var(--entropix-spacing-6); }
40
- .entropix-inline--gap-xl { gap: var(--entropix-spacing-8); }
41
- .entropix-inline--gap-2xl { gap: var(--entropix-spacing-12); }
42
-
43
- .entropix-inline--align-start { align-items: flex-start; }
44
- .entropix-inline--align-center { align-items: center; }
45
- .entropix-inline--align-end { align-items: flex-end; }
46
- .entropix-inline--align-stretch { align-items: stretch; }
47
- .entropix-inline--align-baseline { align-items: baseline; }
48
-
49
- .entropix-inline--justify-start { justify-content: flex-start; }
50
- .entropix-inline--justify-center { justify-content: center; }
51
- .entropix-inline--justify-end { justify-content: flex-end; }
52
- .entropix-inline--justify-between { justify-content: space-between; }
53
- .entropix-inline--justify-around { justify-content: space-around; }
54
-
55
- .entropix-inline--wrap { flex-wrap: wrap; }
56
-
57
- /* === Container (page-level wrapper) === */
58
-
59
- .entropix-container {
60
- width: 100%;
61
- margin-left: auto;
62
- margin-right: auto;
63
- padding-left: var(--entropix-space-layout-page-margin);
64
- padding-right: var(--entropix-space-layout-page-margin);
65
- }
36
+ .entropix-inline--gap-none { gap: 0; }
37
+ .entropix-inline--gap-xs { gap: var(--entropix-spacing-1); }
38
+ .entropix-inline--gap-sm { gap: var(--entropix-spacing-2); }
39
+ .entropix-inline--gap-md { gap: var(--entropix-spacing-4); }
40
+ .entropix-inline--gap-lg { gap: var(--entropix-spacing-6); }
41
+ .entropix-inline--gap-xl { gap: var(--entropix-spacing-8); }
42
+ .entropix-inline--gap-2xl { gap: var(--entropix-spacing-12); }
66
43
 
67
- .entropix-container--xs { max-width: 480px; }
68
- .entropix-container--sm { max-width: 640px; }
69
- .entropix-container--md { max-width: 768px; }
70
- .entropix-container--lg { max-width: 1024px; }
71
- .entropix-container--xl { max-width: 1280px; }
72
- .entropix-container--full { max-width: 100%; }
73
-
74
- .entropix-container--center {
75
- display: flex;
76
- flex-direction: column;
77
- align-items: center;
78
- }
44
+ .entropix-inline--align-start { align-items: flex-start; }
45
+ .entropix-inline--align-center { align-items: center; }
46
+ .entropix-inline--align-end { align-items: flex-end; }
47
+ .entropix-inline--align-stretch { align-items: stretch; }
48
+ .entropix-inline--align-baseline { align-items: baseline; }
79
49
 
80
- /* === Divider (visual separator) === */
50
+ .entropix-inline--justify-start { justify-content: flex-start; }
51
+ .entropix-inline--justify-center { justify-content: center; }
52
+ .entropix-inline--justify-end { justify-content: flex-end; }
53
+ .entropix-inline--justify-between { justify-content: space-between; }
54
+ .entropix-inline--justify-around { justify-content: space-around; }
81
55
 
82
- .entropix-divider {
83
- border: 0;
84
- border-top: 1px solid var(--entropix-color-border-default);
85
- margin: 0;
86
- width: 100%;
87
- }
56
+ .entropix-inline--wrap { flex-wrap: wrap; }
88
57
 
89
- .entropix-divider--vertical {
90
- border-top: 0;
91
- border-left: 1px solid var(--entropix-color-border-default);
92
- width: auto;
93
- height: auto;
94
- align-self: stretch;
95
- }
58
+ /* === Container (page-level wrapper) === */
96
59
 
97
- .entropix-divider--spacing-sm { margin: var(--entropix-spacing-2) 0; }
98
- .entropix-divider--spacing-md { margin: var(--entropix-spacing-4) 0; }
99
- .entropix-divider--spacing-lg { margin: var(--entropix-spacing-6) 0; }
60
+ .entropix-container {
61
+ width: 100%;
62
+ margin-left: auto;
63
+ margin-right: auto;
64
+ padding-left: var(--entropix-space-layout-page-margin);
65
+ padding-right: var(--entropix-space-layout-page-margin);
66
+ }
100
67
 
101
- .entropix-divider--vertical.entropix-divider--spacing-sm { margin: 0 var(--entropix-spacing-2); }
102
- .entropix-divider--vertical.entropix-divider--spacing-md { margin: 0 var(--entropix-spacing-4); }
103
- .entropix-divider--vertical.entropix-divider--spacing-lg { margin: 0 var(--entropix-spacing-6); }
68
+ .entropix-container--xs { max-width: 480px; }
69
+ .entropix-container--sm { max-width: 640px; }
70
+ .entropix-container--md { max-width: 768px; }
71
+ .entropix-container--lg { max-width: 1024px; }
72
+ .entropix-container--xl { max-width: 1280px; }
73
+ .entropix-container--full { max-width: 100%; }
74
+
75
+ .entropix-container--center {
76
+ display: flex;
77
+ flex-direction: column;
78
+ align-items: center;
79
+ }
104
80
 
105
- /* ═══════════════════════════════════════════════════════════════════════════
106
- RESPONSIVE — Tablet and up (≥768px)
107
- ═══════════════════════════════════════════════════════════════════════════ */
81
+ /* === Divider (visual separator) === */
108
82
 
109
- @media (min-width: 768px) {
110
- .entropix-container {
111
- padding-left: var(--entropix-space-layout-page-margin-md);
112
- padding-right: var(--entropix-space-layout-page-margin-md);
83
+ .entropix-divider {
84
+ border: 0;
85
+ border-top: 1px solid var(--entropix-color-border-default);
86
+ margin: 0;
87
+ width: 100%;
113
88
  }
114
- }
115
89
 
116
- /* ═══════════════════════════════════════════════════════════════════════════
117
- RESPONSIVE — Desktop and up (≥1024px)
118
- ═══════════════════════════════════════════════════════════════════════════ */
90
+ .entropix-divider--vertical {
91
+ border-top: 0;
92
+ border-left: 1px solid var(--entropix-color-border-default);
93
+ width: auto;
94
+ height: auto;
95
+ align-self: stretch;
96
+ }
119
97
 
120
- @media (min-width: 1024px) {
121
- .entropix-container {
122
- padding-left: var(--entropix-space-layout-page-margin-lg);
123
- padding-right: var(--entropix-space-layout-page-margin-lg);
98
+ .entropix-divider--spacing-sm { margin: var(--entropix-spacing-2) 0; }
99
+ .entropix-divider--spacing-md { margin: var(--entropix-spacing-4) 0; }
100
+ .entropix-divider--spacing-lg { margin: var(--entropix-spacing-6) 0; }
101
+
102
+ .entropix-divider--vertical.entropix-divider--spacing-sm { margin: 0 var(--entropix-spacing-2); }
103
+ .entropix-divider--vertical.entropix-divider--spacing-md { margin: 0 var(--entropix-spacing-4); }
104
+ .entropix-divider--vertical.entropix-divider--spacing-lg { margin: 0 var(--entropix-spacing-6); }
105
+
106
+ /* ═══════════════════════════════════════════════════════════════════════════
107
+ RESPONSIVE — Tablet and up (>=768px)
108
+ ═══════════════════════════════════════════════════════════════════════════ */
109
+
110
+ @media (min-width: 768px) {
111
+ .entropix-container {
112
+ padding-left: var(--entropix-space-layout-page-margin-md);
113
+ padding-right: var(--entropix-space-layout-page-margin-md);
114
+ }
115
+ }
116
+
117
+ /* ═══════════════════════════════════════════════════════════════════════════
118
+ RESPONSIVE — Desktop and up (>=1024px)
119
+ ═══════════════════════════════════════════════════════════════════════════ */
120
+
121
+ @media (min-width: 1024px) {
122
+ .entropix-container {
123
+ padding-left: var(--entropix-space-layout-page-margin-lg);
124
+ padding-right: var(--entropix-space-layout-page-margin-lg);
125
+ }
124
126
  }
125
127
  }
package/dist/styles/menu.css CHANGED
@@ -1,62 +1,64 @@
1
1
  /* Menu — @entropix/react */
2
2
 
3
- .entropix-menu-trigger {
4
- /* Inherits button styles if also .entropix-button */
5
- }
3
+ @layer entropix {
4
+ .entropix-menu-trigger {
5
+ /* Inherits button styles if also .entropix-button */
6
+ }
6
7
 
7
- .entropix-menu-content {
8
- min-width: 160px;
9
- padding: var(--entropix-spacing-1);
10
- background: var(--entropix-color-bg-primary);
11
- border: 1px solid var(--entropix-color-border-default);
12
- border-radius: var(--entropix-radius-md);
13
- box-shadow: var(--entropix-shadow-lg);
14
- z-index: 50;
15
- }
8
+ .entropix-menu-content {
9
+ min-width: 160px;
10
+ padding: var(--entropix-spacing-1);
11
+ background: var(--entropix-color-bg-primary);
12
+ border: 1px solid var(--entropix-color-border-default);
13
+ border-radius: var(--entropix-radius-md);
14
+ box-shadow: var(--entropix-shadow-lg);
15
+ z-index: 50;
16
+ }
16
17
 
17
- .entropix-menu-item {
18
- display: flex;
19
- align-items: center;
20
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
21
- border-radius: var(--entropix-radius-sm);
22
- font-family: var(--entropix-font-family-sans);
23
- font-size: var(--entropix-font-size-sm);
24
- color: var(--entropix-color-text-primary);
25
- cursor: pointer;
26
- user-select: none;
27
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
28
- }
18
+ .entropix-menu-item {
19
+ display: flex;
20
+ align-items: center;
21
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
22
+ border-radius: var(--entropix-radius-sm);
23
+ font-family: var(--entropix-font-family-sans);
24
+ font-size: var(--entropix-font-size-sm);
25
+ color: var(--entropix-color-text-primary);
26
+ cursor: pointer;
27
+ user-select: none;
28
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
29
+ }
29
30
 
30
- .entropix-menu-item:hover {
31
- background: var(--entropix-color-action-secondary-default);
32
- }
31
+ .entropix-menu-item:hover {
32
+ background: var(--entropix-color-action-secondary-default);
33
+ }
33
34
 
34
- .entropix-menu-item[data-state="active"] {
35
- background: var(--entropix-color-action-secondary-default);
36
- }
35
+ .entropix-menu-item[data-state="active"] {
36
+ background: var(--entropix-color-action-secondary-default);
37
+ }
37
38
 
38
- .entropix-menu-item[data-disabled="true"],
39
- .entropix-menu-item[aria-disabled="true"] {
40
- opacity: 0.5;
41
- cursor: not-allowed;
42
- pointer-events: none;
43
- }
39
+ .entropix-menu-item[data-disabled="true"],
40
+ .entropix-menu-item[aria-disabled="true"] {
41
+ opacity: 0.5;
42
+ cursor: not-allowed;
43
+ pointer-events: none;
44
+ }
44
45
 
45
- .entropix-menu-item:focus-visible {
46
- outline: 2px solid var(--entropix-color-border-focus);
47
- outline-offset: -2px;
48
- }
46
+ .entropix-menu-item:focus-visible {
47
+ outline: 2px solid var(--entropix-color-border-focus);
48
+ outline-offset: -2px;
49
+ }
49
50
 
50
- /* === Responsive — Larger touch targets on mobile === */
51
+ /* === Responsive — Larger touch targets on mobile === */
51
52
 
52
- @media (max-width: 767px) {
53
- .entropix-menu-content {
54
- min-width: 200px;
55
- }
53
+ @media (max-width: 767px) {
54
+ .entropix-menu-content {
55
+ min-width: 200px;
56
+ }
56
57
 
57
- .entropix-menu-item {
58
- padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
59
- font-size: var(--entropix-font-size-base);
60
- min-height: 44px;
58
+ .entropix-menu-item {
59
+ padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
60
+ font-size: var(--entropix-font-size-base);
61
+ min-height: 44px;
62
+ }
61
63
  }
62
64
  }