@oscarpalmer/oui 0.30.0 → 0.32.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.
- package/dist/css/badge.css +1 -5
- package/dist/css/combobox.css +224 -0
- package/dist/css/form.css +18 -14
- package/dist/js/combobox.d.mts +65 -1
- package/dist/js/combobox.mjs +587 -206
- package/dist/js/focus-trap/focus-trap.embedded.mjs +3 -4
- package/dist/js/internal/draggable.mjs +7 -15
- package/dist/js/menu.d.mts +1 -1
- package/dist/js/menu.mjs +5 -2
- package/dist/js/movable/movable.embedded.mjs +6 -10
- package/dist/js/resizable/resizable.embedded.mjs +9 -16
- package/dist/js/sortable/sortable.embedded.mjs +21 -26
- package/dist/js/toolbar.d.mts +1 -1
- package/package.json +4 -4
- package/src/css/badge.scss +1 -18
- package/src/css/combobox.scss +192 -2
- package/src/css/form.scss +18 -80
- package/src/css/mixins.scss +78 -0
- package/src/js/combobox.ts +1053 -336
- package/src/js/focus-trap/focus-trap.embedded.ts +3 -7
- package/src/js/internal/draggable.ts +4 -10
- package/src/js/menu.ts +5 -2
- package/src/js/movable/movable.embedded.ts +3 -6
- package/src/js/resizable/resizable.embedded.ts +6 -19
- package/src/js/sortable/sortable.embedded.ts +17 -14
package/src/css/form.scss
CHANGED
|
@@ -2,70 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
@use 'mixins.scss' as mixins;
|
|
4
4
|
|
|
5
|
-
@mixin focus() {
|
|
6
|
-
--oui-border-value: var(--oui-blue-5);
|
|
7
|
-
--oui-foreground-value: inherit;
|
|
8
|
-
--oui-outline-percentage: 75%;
|
|
9
|
-
--oui-outline-value: var(--oui-blue-6);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@mixin hover() {
|
|
13
|
-
--oui-border-value: var(--oui-blue-4);
|
|
14
|
-
--oui-foreground-percentage: 0%;
|
|
15
|
-
--oui-foreground-value: inherit;
|
|
16
|
-
--oui-outline-percentage: 90%;
|
|
17
|
-
--oui-outline-value: var(--oui-blue-6);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@mixin input {
|
|
21
|
-
--oui-background-percentage: 0%;
|
|
22
|
-
--oui-foreground-percentage: 0%;
|
|
23
|
-
|
|
24
|
-
@include outlined;
|
|
25
|
-
|
|
26
|
-
background-color: color-mix(
|
|
27
|
-
in oklab,
|
|
28
|
-
var(--oui-background-value),
|
|
29
|
-
transparent var(--oui-background-percentage)
|
|
30
|
-
);
|
|
31
|
-
border: 1px solid var(--oui-border-value, var(--oui-gray-3));
|
|
32
|
-
box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
|
|
33
|
-
color: color-mix(
|
|
34
|
-
in oklab,
|
|
35
|
-
var(--oui-foreground-value, inherit),
|
|
36
|
-
transparent var(--oui-foreground-percentage)
|
|
37
|
-
);
|
|
38
|
-
-webkit-text-fill-color: color-mix(
|
|
39
|
-
in oklab,
|
|
40
|
-
var(--oui-foreground-value, inherit),
|
|
41
|
-
transparent var(--oui-foreground-percentage)
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
@mixin invalid() {
|
|
46
|
-
--oui-border-value: var(--oui-red-5);
|
|
47
|
-
--oui-foreground-value: var(--oui-red-9);
|
|
48
|
-
--oui-outline-percentage: 82.5%;
|
|
49
|
-
--oui-outline-value: var(--oui-red-6);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@mixin outlined {
|
|
53
|
-
--oui-outline-percentage: 100%;
|
|
54
|
-
--oui-outline-value: var(--oui-blue-6);
|
|
55
|
-
|
|
56
|
-
outline: 4px solid
|
|
57
|
-
color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
|
|
58
|
-
outline-offset: 0;
|
|
59
|
-
transition: 0.125s ease-in-out;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
@mixin valid() {
|
|
63
|
-
--oui-border-value: var(--oui-green-5);
|
|
64
|
-
--oui-foreground-value: var(--oui-green-9);
|
|
65
|
-
--oui-outline-percentage: 82.5%;
|
|
66
|
-
--oui-outline-value: var(--oui-green-6);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
5
|
:where(.oui-fieldset) {
|
|
70
6
|
padding: 1em;
|
|
71
7
|
border: 1px solid var(--oui-gray-3);
|
|
@@ -78,7 +14,7 @@
|
|
|
78
14
|
}
|
|
79
15
|
|
|
80
16
|
:where(&:not([type='range' i])) {
|
|
81
|
-
@include input;
|
|
17
|
+
@include mixins.input;
|
|
82
18
|
|
|
83
19
|
padding: 0.5em 0.75em;
|
|
84
20
|
border-radius: 0.25em;
|
|
@@ -135,7 +71,7 @@
|
|
|
135
71
|
outline: none;
|
|
136
72
|
|
|
137
73
|
&::range-track {
|
|
138
|
-
@include input;
|
|
74
|
+
@include mixins.input;
|
|
139
75
|
|
|
140
76
|
appearance: none;
|
|
141
77
|
width: 100%;
|
|
@@ -148,7 +84,7 @@
|
|
|
148
84
|
--oui-background-percentage: 0%;
|
|
149
85
|
--oui-background-value: var(--oui-blue-6);
|
|
150
86
|
|
|
151
|
-
@include outlined;
|
|
87
|
+
@include mixins.input-outlined;
|
|
152
88
|
|
|
153
89
|
appearance: none;
|
|
154
90
|
width: 1.25em;
|
|
@@ -177,7 +113,7 @@
|
|
|
177
113
|
[aria-invalid='true' i]
|
|
178
114
|
)
|
|
179
115
|
) {
|
|
180
|
-
@include invalid;
|
|
116
|
+
@include mixins.input-invalid;
|
|
181
117
|
|
|
182
118
|
&::file-selector-button {
|
|
183
119
|
--oui-background-value: var(--oui-red-2);
|
|
@@ -190,7 +126,7 @@
|
|
|
190
126
|
}
|
|
191
127
|
|
|
192
128
|
&::range-track {
|
|
193
|
-
@include invalid;
|
|
129
|
+
@include mixins.input-invalid;
|
|
194
130
|
}
|
|
195
131
|
|
|
196
132
|
& > option:checked {
|
|
@@ -205,7 +141,7 @@
|
|
|
205
141
|
[aria-invalid='false' i]
|
|
206
142
|
)
|
|
207
143
|
) {
|
|
208
|
-
@include valid;
|
|
144
|
+
@include mixins.input-valid;
|
|
209
145
|
|
|
210
146
|
&::file-selector-button {
|
|
211
147
|
--oui-background-value: var(--oui-green-2);
|
|
@@ -214,7 +150,7 @@
|
|
|
214
150
|
}
|
|
215
151
|
|
|
216
152
|
&::range-track {
|
|
217
|
-
@include valid;
|
|
153
|
+
@include mixins.input-valid;
|
|
218
154
|
}
|
|
219
155
|
|
|
220
156
|
&::range-thumb {
|
|
@@ -249,7 +185,7 @@
|
|
|
249
185
|
|
|
250
186
|
:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus),
|
|
251
187
|
:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus-within) {
|
|
252
|
-
@include focus;
|
|
188
|
+
@include mixins.input-focus;
|
|
253
189
|
|
|
254
190
|
&::file-selector-button {
|
|
255
191
|
--oui-background-value: var(--oui-blue-2);
|
|
@@ -259,7 +195,7 @@
|
|
|
259
195
|
|
|
260
196
|
&::range-thumb,
|
|
261
197
|
&::range-track {
|
|
262
|
-
@include focus;
|
|
198
|
+
@include mixins.input-focus;
|
|
263
199
|
}
|
|
264
200
|
|
|
265
201
|
&::range-thumb {
|
|
@@ -271,7 +207,7 @@
|
|
|
271
207
|
|
|
272
208
|
@media (hover: hover) {
|
|
273
209
|
:where(&:not([disabled], [readonly], [aria-disabled='true' i]):hover) {
|
|
274
|
-
@include hover;
|
|
210
|
+
@include mixins.input-hover;
|
|
275
211
|
|
|
276
212
|
&::file-selector-button {
|
|
277
213
|
--oui-background-value: var(--oui-blue-2);
|
|
@@ -284,12 +220,12 @@
|
|
|
284
220
|
}
|
|
285
221
|
|
|
286
222
|
&::range-track {
|
|
287
|
-
@include hover;
|
|
223
|
+
@include mixins.input-hover;
|
|
288
224
|
}
|
|
289
225
|
}
|
|
290
226
|
}
|
|
291
227
|
|
|
292
|
-
:where(
|
|
228
|
+
:where(&:is([disabled], [readonly], [aria-disabled='true' i])) {
|
|
293
229
|
--oui-foreground-percentage: 25%;
|
|
294
230
|
|
|
295
231
|
font-style: italic;
|
|
@@ -311,7 +247,7 @@
|
|
|
311
247
|
--oui-outline-percentage: 75%;
|
|
312
248
|
}
|
|
313
249
|
|
|
314
|
-
:where(
|
|
250
|
+
:where(&:is([disabled], [aria-disabled='true' i])) {
|
|
315
251
|
--oui-background-percentage: 50%;
|
|
316
252
|
|
|
317
253
|
&::range-thumb {
|
|
@@ -383,9 +319,11 @@ select.oui-input:is([multiple]) {
|
|
|
383
319
|
font-weight: bold;
|
|
384
320
|
}
|
|
385
321
|
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
322
|
+
.oui-label {
|
|
323
|
+
:where(&) {
|
|
324
|
+
cursor: pointer;
|
|
325
|
+
transition: 0.125s ease-in-out;
|
|
326
|
+
}
|
|
389
327
|
|
|
390
328
|
@media (hover: hover) {
|
|
391
329
|
:where(&[for]:hover) {
|
package/src/css/mixins.scss
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
@mixin badge() {
|
|
2
|
+
--oui-shadow-mixed: color-mix(in oklab, var(--oui-shadow, var(--oui-gray-6)), transparent 92.5%);
|
|
3
|
+
|
|
4
|
+
@include shadow(var(--oui-shadow-mixed));
|
|
5
|
+
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
flex-flow: row nowrap;
|
|
8
|
+
gap: 0.5em;
|
|
9
|
+
background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
|
|
10
|
+
color: var(--oui-foreground, var(--oui-gray-8));
|
|
11
|
+
line-height: 1.25;
|
|
12
|
+
}
|
|
13
|
+
|
|
1
14
|
@mixin button() {
|
|
2
15
|
--oui-background-percentage: 25%;
|
|
3
16
|
--oui-foreground-percentage: 0%;
|
|
@@ -77,6 +90,71 @@
|
|
|
77
90
|
}
|
|
78
91
|
}
|
|
79
92
|
|
|
93
|
+
@mixin input {
|
|
94
|
+
--oui-background-percentage: 0%;
|
|
95
|
+
--oui-foreground-percentage: 0%;
|
|
96
|
+
|
|
97
|
+
@include input-outlined;
|
|
98
|
+
|
|
99
|
+
align-content: center;
|
|
100
|
+
background-color: color-mix(
|
|
101
|
+
in oklab,
|
|
102
|
+
var(--oui-background-value),
|
|
103
|
+
transparent var(--oui-background-percentage)
|
|
104
|
+
);
|
|
105
|
+
border: 1px solid var(--oui-border-value, var(--oui-gray-3));
|
|
106
|
+
box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
|
|
107
|
+
color: color-mix(
|
|
108
|
+
in oklab,
|
|
109
|
+
var(--oui-foreground-value, inherit),
|
|
110
|
+
transparent var(--oui-foreground-percentage)
|
|
111
|
+
);
|
|
112
|
+
-webkit-text-fill-color: color-mix(
|
|
113
|
+
in oklab,
|
|
114
|
+
var(--oui-foreground-value, inherit),
|
|
115
|
+
transparent var(--oui-foreground-percentage)
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@mixin input-focus() {
|
|
120
|
+
--oui-border-value: var(--oui-blue-5);
|
|
121
|
+
--oui-foreground-value: inherit;
|
|
122
|
+
--oui-outline-percentage: 75%;
|
|
123
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
@mixin input-hover() {
|
|
127
|
+
--oui-border-value: var(--oui-blue-4);
|
|
128
|
+
--oui-foreground-percentage: 0%;
|
|
129
|
+
--oui-foreground-value: inherit;
|
|
130
|
+
--oui-outline-percentage: 90%;
|
|
131
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
@mixin input-invalid() {
|
|
135
|
+
--oui-border-value: var(--oui-red-5);
|
|
136
|
+
--oui-foreground-value: var(--oui-red-9);
|
|
137
|
+
--oui-outline-percentage: 82.5%;
|
|
138
|
+
--oui-outline-value: var(--oui-red-6);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@mixin input-outlined {
|
|
142
|
+
--oui-outline-percentage: 100%;
|
|
143
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
144
|
+
|
|
145
|
+
outline: 4px solid
|
|
146
|
+
color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
|
|
147
|
+
outline-offset: 0;
|
|
148
|
+
transition: 0.125s ease-in-out;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
@mixin input-valid() {
|
|
152
|
+
--oui-border-value: var(--oui-green-5);
|
|
153
|
+
--oui-foreground-value: var(--oui-green-9);
|
|
154
|
+
--oui-outline-percentage: 82.5%;
|
|
155
|
+
--oui-outline-value: var(--oui-green-6);
|
|
156
|
+
}
|
|
157
|
+
|
|
80
158
|
@mixin shadow($color: rgb(0 0 0 / 5%), $inset: transparent) {
|
|
81
159
|
box-shadow:
|
|
82
160
|
inset 0 1px 0 0 $inset,
|