@basis-ng/styles 0.0.1-alpha.183 → 0.0.1-alpha.185

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/menu.css +78 -83
  3. package/src/components/option.css +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@basis-ng/styles",
3
- "version": "0.0.1-alpha.183",
3
+ "version": "0.0.1-alpha.185",
4
4
  "description": "CSS foundation for @basis-ng/primitives components",
5
5
  "main": "src/index.css",
6
6
  "exports": {
package/src/components/menu.css CHANGED
@@ -4,53 +4,105 @@ b-menu {
4
4
  /* Base */
5
5
  @apply text-base rounded-size-md;
6
6
 
7
+ /* Horizontal Modifier: Only applies to direct children */
8
+ &.b-orientation-horizontal {
9
+ @apply flex-row items-center w-max;
10
+
11
+ & > b-menu-group {
12
+ @apply flex-row items-center h-full;
13
+
14
+ /* Border adjustments for horizontal layout */
15
+ &:not(:first-child) {
16
+ @apply border-t-0 border-l border-secondary;
17
+ @apply dark:border-l-secondary-dark;
18
+ }
19
+ &:not(:last-child) {
20
+ @apply border-b-0;
21
+ }
22
+ }
23
+
24
+ /* Spacing adjustments for direct items in horizontal mode */
25
+ &:not(:has(> b-menu-group)) {
26
+ @apply py-0 px-1; /* Reduce vertical padding in horizontal mode */
27
+ }
28
+ }
29
+
30
+ /* --- Vertical Structure (Default) --- */
7
31
  &:not(:has(b-menu-group)) {
8
32
  @apply p-1 gap-1;
9
33
  }
10
34
 
11
35
  b-menu-group {
12
- @apply p-1 gap-1;
36
+ @apply p-1 gap-1 flex flex-col;
37
+
38
+ &:not(:first-child) {
39
+ @apply border-t border-secondary;
40
+ @apply dark:border-secondary-dark;
41
+ }
42
+
43
+ &:not(:last-child) {
44
+ @apply border-b border-secondary;
45
+ @apply dark:border-secondary-dark;
46
+ }
13
47
  }
14
48
 
49
+ /* --- Internal Elements --- */
15
50
  b-menu-label {
16
- @apply px-3 py-0 text-sm h-8 gap-1.5 flex items-center;
51
+ @apply px-3 py-0 text-sm h-8 gap-1.5 flex items-center whitespace-nowrap;
17
52
  }
18
53
 
19
54
  button[b-menu-item],
20
55
  button[b-menu-item-radio],
21
56
  button[b-menu-item-checkbox] {
22
- @apply px-3 py-0 text-sm h-8 rounded-size-md gap-1.5;
57
+ @apply px-3 py-0 text-sm h-8 rounded-size-md gap-1.5 flex items-center cursor-pointer;
58
+ @apply hover:bg-secondary/50;
59
+ @apply dark:hover:bg-secondary-dark/50;
60
+ @apply whitespace-nowrap;
23
61
 
24
- /* Use same squared sizing approach as buttons: aspect-square + size utilities */
25
62
  &.b-squared {
26
- @apply aspect-square p-0 flex items-center justify-center;
27
- /* default (no explicit size) should match button default (md -> size-8) */
28
- @apply size-8;
63
+ @apply aspect-square p-0 flex items-center justify-center size-8;
29
64
  text-align: center;
30
65
  }
66
+
67
+ &.b-destructive {
68
+ @apply bg-destructive/10 text-destructive;
69
+ @apply dark:bg-destructive-dark/10 dark:text-destructive-dark;
70
+ @apply hover:bg-destructive/20;
71
+ @apply dark:hover:bg-destructive-dark/20;
72
+ }
73
+
74
+ &:focus-visible {
75
+ @apply outline-2 outline-offset-4 outline-primary;
76
+ @apply dark:outline-primary-dark;
77
+ }
78
+
79
+ &[aria-selected='true'],
80
+ &.b-active {
81
+ @apply bg-secondary text-secondary-foreground;
82
+ @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark;
83
+ }
84
+
85
+ &[aria-disabled='true'] {
86
+ @apply opacity-60 pointer-events-none bg-none cursor-auto;
87
+ }
31
88
  }
32
89
 
90
+ /* --- Sizes --- */
33
91
  &.b-size-sm {
34
92
  @apply text-sm rounded-size-sm box-border;
35
93
 
36
- &:not(:has(b-menu-group)) {
94
+ &:not(:has(b-menu-group)),
95
+ & b-menu-group {
37
96
  @apply p-0.5 gap-0.5;
38
97
  }
39
-
40
- b-menu-group {
41
- @apply p-0.5 gap-0.5;
42
- }
43
-
44
98
  b-menu-label {
45
- @apply px-2 py-0 text-xs h-6 gap-1 flex items-center;
99
+ @apply px-2 text-xs h-6 gap-1;
46
100
  }
47
-
48
101
  button[b-menu-item],
49
102
  button[b-menu-item-radio],
50
103
  button[b-menu-item-checkbox] {
51
- @apply px-2 py-0 text-xs h-6 rounded-size-xs gap-1;
104
+ @apply px-2 text-xs h-6 rounded-size-xs gap-1;
52
105
  &.b-squared {
53
- @apply aspect-square p-0 flex items-center justify-center;
54
106
  @apply size-6;
55
107
  }
56
108
  }
@@ -58,25 +110,18 @@ b-menu {
58
110
 
59
111
  &.b-size-md {
60
112
  @apply text-base rounded-size-md;
61
-
62
- &:not(:has(b-menu-group)) {
113
+ &:not(:has(b-menu-group)),
114
+ & b-menu-group {
63
115
  @apply p-1 gap-1;
64
116
  }
65
-
66
- b-menu-group {
67
- @apply p-1 gap-1;
68
- }
69
-
70
117
  b-menu-label {
71
- @apply px-3 py-0 text-sm h-8 gap-1.5 flex items-center;
118
+ @apply px-3 text-sm h-8 gap-1.5;
72
119
  }
73
-
74
120
  button[b-menu-item],
75
121
  button[b-menu-item-radio],
76
122
  button[b-menu-item-checkbox] {
77
- @apply px-3 py-0 text-sm h-8 rounded-size-sm gap-1.5;
123
+ @apply px-3 text-sm h-8 rounded-size-sm gap-1.5;
78
124
  &.b-squared {
79
- @apply aspect-square p-0 flex items-center justify-center;
80
125
  @apply size-8;
81
126
  }
82
127
  }
@@ -84,75 +129,25 @@ b-menu {
84
129
 
85
130
  &.b-size-lg {
86
131
  @apply text-lg rounded-size-lg;
87
-
88
- &:not(:has(b-menu-group)) {
89
- @apply p-1.5 gap-1.5;
90
- }
91
-
92
- b-menu-group {
132
+ &:not(:has(b-menu-group)),
133
+ & b-menu-group {
93
134
  @apply p-1.5 gap-1.5;
94
135
  }
95
-
96
136
  b-menu-label {
97
- @apply px-4 py-0 text-base h-10 gap-2 flex items-center;
137
+ @apply px-4 text-base h-10 gap-2;
98
138
  }
99
-
100
139
  button[b-menu-item],
101
140
  button[b-menu-item-radio],
102
141
  button[b-menu-item-checkbox] {
103
- @apply px-4 py-0 text-base h-10 rounded-size-md gap-2;
142
+ @apply px-4 text-base h-10 rounded-size-md gap-2;
104
143
  &.b-squared {
105
- @apply aspect-square p-0 flex items-center justify-center;
106
144
  @apply size-10;
107
145
  }
108
146
  }
109
147
  }
110
-
111
- button[b-menu-item],
112
- button[b-menu-item-radio],
113
- button[b-menu-item-checkbox] {
114
- @apply flex items-center gap-2 cursor-pointer;
115
- @apply hover:bg-secondary/50;
116
- @apply dark:hover:bg-secondary-dark/50;
117
-
118
- &.b-destructive {
119
- @apply bg-destructive/10 text-destructive;
120
- @apply dark:bg-destructive-dark/10 dark:text-destructive-dark;
121
- @apply hover:bg-destructive/20;
122
- @apply dark:hover:bg-destructive-dark/20;
123
- }
124
-
125
- &:focus-visible {
126
- @apply outline-2 outline-offset-4 outline-primary;
127
- @apply dark:outline-primary-dark;
128
- }
129
-
130
- &[aria-selected='true'],
131
- &.b-active {
132
- @apply bg-secondary text-secondary-foreground;
133
- @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark;
134
- }
135
-
136
- &[aria-disabled='true'] {
137
- @apply opacity-60 pointer-events-none bg-none cursor-auto;
138
- }
139
- }
140
-
141
- b-menu-group {
142
- @apply flex flex-col;
143
-
144
- &:not(:first-child) {
145
- @apply border-t border-secondary;
146
- @apply dark:border-secondary-dark;
147
- }
148
-
149
- &:not(:last-child) {
150
- @apply border-b border-secondary;
151
- @apply dark:border-secondary-dark;
152
- }
153
- }
154
148
  }
155
149
 
150
+ /* Overlay Styles (Popups) */
156
151
  .cdk-overlay-container b-menu {
157
152
  @apply inset-ring-1 inset-ring-ring bg-background shadow-xs;
158
153
  @apply dark:inset-ring-ring-dark/60 dark:bg-background-dark;
package/src/components/option.css CHANGED
@@ -4,7 +4,7 @@ li[b-option] {
4
4
  @apply dark:hover:bg-secondary-dark/30;
5
5
 
6
6
  /* Default */
7
- @apply px-3 py-0 text-sm h-8 rounded-size-sm gap-1.5;
7
+ @apply px-3 py-0 text-sm h-8 min-h-8 rounded-size-sm gap-1.5;
8
8
 
9
9
  &.cdk-option-active {
10
10
  @apply bg-secondary/30;