mnfst 0.5.146 → 0.5.148
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.
- package/lib/manifest.combobox.css +210 -0
- package/lib/manifest.combobox.js +570 -0
- package/lib/manifest.css +110 -62
- package/lib/manifest.integrity.json +2 -1
- package/lib/manifest.js +1 -0
- package/lib/manifest.min.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
/* Manifest Combobox */
|
|
2
|
+
|
|
3
|
+
@layer components {
|
|
4
|
+
|
|
5
|
+
/* Field shell — inherits input tokens so it reads as a normal field */
|
|
6
|
+
:where(.combobox):not(.unstyle) {
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-wrap: wrap;
|
|
9
|
+
align-items: center;
|
|
10
|
+
gap: var(--spacing, 0.25rem);
|
|
11
|
+
width: 100%;
|
|
12
|
+
max-width: 100%;
|
|
13
|
+
min-height: var(--spacing-field-height, 2.25rem);
|
|
14
|
+
padding: calc(var(--spacing, 0.25rem) * 1.25) var(--spacing-field-padding, 0.625rem);
|
|
15
|
+
color: var(--color-field-inverse, oklch(43.9% 0 0));
|
|
16
|
+
background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
|
|
17
|
+
border-radius: var(--radius, 0.5rem);
|
|
18
|
+
transition: var(--transition);
|
|
19
|
+
cursor: text;
|
|
20
|
+
|
|
21
|
+
&:hover:has(> :where(input:not([type=hidden]), textarea, button):not([hidden])) {
|
|
22
|
+
background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&:not(:has(> :where(input:not([type=hidden]), textarea, button):not([hidden]))) {
|
|
26
|
+
cursor: default
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:focus-within {
|
|
30
|
+
background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
|
|
31
|
+
box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 30%, transparent)
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&:has(.combobox-chip) {
|
|
35
|
+
padding-inline: calc(var(--spacing, 0.25rem) * 1.25)
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&:has(> :where(input, textarea):disabled) {
|
|
39
|
+
opacity: .5;
|
|
40
|
+
pointer-events: none
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Inner typing surface. The :not(.unstyle) lifts specificity above
|
|
44
|
+
manifest.input.css, which sorts after this file in the bundled CSS and
|
|
45
|
+
would otherwise re-apply its own width/background/hover to the editor. */
|
|
46
|
+
&> :where(input:not([type=hidden]), textarea):not(.unstyle) {
|
|
47
|
+
flex: 1 0 auto;
|
|
48
|
+
width: auto;
|
|
49
|
+
min-width: 7rem;
|
|
50
|
+
height: auto;
|
|
51
|
+
margin: 0;
|
|
52
|
+
padding: 0;
|
|
53
|
+
color: inherit;
|
|
54
|
+
background: transparent;
|
|
55
|
+
field-sizing: content;
|
|
56
|
+
|
|
57
|
+
&:hover,
|
|
58
|
+
&:focus-visible {
|
|
59
|
+
background: transparent;
|
|
60
|
+
box-shadow: none
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&>textarea {
|
|
65
|
+
resize: none
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Chips */
|
|
70
|
+
:where(.combobox-chip):not(.unstyle) {
|
|
71
|
+
display: inline-flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
gap: var(--spacing, 0.25rem);
|
|
74
|
+
max-width: 100%;
|
|
75
|
+
height: calc(var(--spacing-field-height, 2.25rem) - var(--spacing, 0.25rem) * 2.5);
|
|
76
|
+
padding-inline-start: calc(var(--spacing, 0.25rem) * 2);
|
|
77
|
+
font-size: 0.875rem;
|
|
78
|
+
color: var(--color-content-stark, oklch(43.9% 0 0));
|
|
79
|
+
background-color: var(--color-popover-surface, oklch(100% 0 0));
|
|
80
|
+
border-radius: calc(var(--radius, 0.5rem) * 0.7);
|
|
81
|
+
overflow: hidden;
|
|
82
|
+
user-select: none;
|
|
83
|
+
|
|
84
|
+
/* Label */
|
|
85
|
+
&>span {
|
|
86
|
+
overflow: hidden;
|
|
87
|
+
text-overflow: ellipsis;
|
|
88
|
+
white-space: nowrap
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Remove button */
|
|
92
|
+
&>button {
|
|
93
|
+
display: inline-flex;
|
|
94
|
+
align-items: center;
|
|
95
|
+
justify-content: center;
|
|
96
|
+
min-width: 0;
|
|
97
|
+
height: 100%;
|
|
98
|
+
aspect-ratio: 1 / 1;
|
|
99
|
+
padding: 0;
|
|
100
|
+
font-size: 1em;
|
|
101
|
+
line-height: 1;
|
|
102
|
+
color: var(--color-content-neutral, oklch(43.9% 0 0));
|
|
103
|
+
background: transparent;
|
|
104
|
+
border-radius: 0;
|
|
105
|
+
cursor: pointer;
|
|
106
|
+
|
|
107
|
+
&:hover {
|
|
108
|
+
color: var(--color-content-stark, oklch(43.9% 0 0));
|
|
109
|
+
background: color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 12%, transparent)
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* Failed validation */
|
|
114
|
+
&[aria-invalid="true"] {
|
|
115
|
+
color: var(--color-negative-inverse, oklch(44.4% 0.177 26.899));
|
|
116
|
+
background-color: var(--color-negative-surface, oklch(80.8% 0.114 19.571))
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* Trigger (editor:none button mode) — transparent; the shell is the field.
|
|
121
|
+
Fills the row like the input editor, with a select-style caret. */
|
|
122
|
+
:where(.combobox) > button:not(.unstyle) {
|
|
123
|
+
flex: 1 1 auto;
|
|
124
|
+
align-self: stretch;
|
|
125
|
+
min-width: 7rem;
|
|
126
|
+
justify-content: flex-start;
|
|
127
|
+
gap: var(--spacing, 0.25rem);
|
|
128
|
+
height: auto;
|
|
129
|
+
min-height: calc(var(--spacing-field-height, 2.25rem) - var(--spacing, 0.25rem) * 2.5);
|
|
130
|
+
padding: 0;
|
|
131
|
+
color: inherit;
|
|
132
|
+
background: transparent;
|
|
133
|
+
cursor: pointer;
|
|
134
|
+
|
|
135
|
+
&:hover {
|
|
136
|
+
background: transparent
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* Caret */
|
|
140
|
+
&::after {
|
|
141
|
+
content: '';
|
|
142
|
+
flex: none;
|
|
143
|
+
width: 1em;
|
|
144
|
+
height: 1em;
|
|
145
|
+
margin-inline-start: auto;
|
|
146
|
+
background-color: var(--color-content-subtle, oklch(55.6% 0 0));
|
|
147
|
+
mask: var(--icon-chevron-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E")) center / contain no-repeat
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* Button-only field (no chips): the button IS the field — it fills the whole
|
|
152
|
+
wrapper and carries the padding, so the entire area is the click target. */
|
|
153
|
+
:where(.combobox):has(> button:not(.unstyle)):not(:has(.combobox-chip)) {
|
|
154
|
+
padding: 0;
|
|
155
|
+
|
|
156
|
+
&>button:not(.unstyle) {
|
|
157
|
+
min-height: var(--spacing-field-height, 2.25rem);
|
|
158
|
+
padding: calc(var(--spacing, 0.25rem) * 1.25) var(--spacing-field-padding, 0.625rem)
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* Listbox — base look comes from menu[popover]; these are combobox-only extras */
|
|
163
|
+
:where(menu[role=listbox]):not(.unstyle) {
|
|
164
|
+
|
|
165
|
+
/* Active descendant (mirrors hover) */
|
|
166
|
+
& :where([role=option][aria-current="true"]) {
|
|
167
|
+
color: var(--color-field-inverse, oklch(43.9% 0 0));
|
|
168
|
+
background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* Filtered out */
|
|
172
|
+
& :where([role=option][hidden]) {
|
|
173
|
+
display: none
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/* Selected (multiple) */
|
|
177
|
+
& :where([role=option][aria-selected="true"]) {
|
|
178
|
+
font-weight: 600
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* "Add …" create row */
|
|
182
|
+
& :where(.combobox-create) {
|
|
183
|
+
color: var(--color-content-neutral, oklch(43.9% 0 0))
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* Empty state */
|
|
187
|
+
& :where(.combobox-empty) {
|
|
188
|
+
padding: 0.5rem;
|
|
189
|
+
color: var(--color-content-subtle, oklch(55.6% 0 0));
|
|
190
|
+
cursor: default;
|
|
191
|
+
|
|
192
|
+
&:hover {
|
|
193
|
+
background: transparent
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* Screen-reader-only live region */
|
|
199
|
+
:where(.combobox)> :where([role=status]) {
|
|
200
|
+
position: absolute;
|
|
201
|
+
width: 1px;
|
|
202
|
+
height: 1px;
|
|
203
|
+
margin: -1px;
|
|
204
|
+
padding: 0;
|
|
205
|
+
overflow: hidden;
|
|
206
|
+
clip: rect(0 0 0 0);
|
|
207
|
+
white-space: nowrap;
|
|
208
|
+
border: 0
|
|
209
|
+
}
|
|
210
|
+
}
|