@oscarpalmer/oui 0.31.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 +95 -10
- package/dist/js/combobox.mjs +250 -192
- package/dist/js/menu.d.mts +1 -1
- package/dist/js/toolbar.d.mts +1 -1
- package/package.json +2 -2
- package/src/css/combobox.scss +92 -13
- package/src/css/mixins.scss +8 -16
- package/src/js/combobox.ts +487 -332
- package/src/js/menu.ts +1 -1
package/src/css/combobox.scss
CHANGED
|
@@ -8,36 +8,40 @@
|
|
|
8
8
|
|
|
9
9
|
--oui-background-value: var(--oui-absolute);
|
|
10
10
|
|
|
11
|
-
padding: 0.5em 2em .5em 0.75em;
|
|
11
|
+
padding: 0.5em 2em 0.5em 0.75em;
|
|
12
12
|
border-radius: 0.25em;
|
|
13
13
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
|
|
14
|
-
background-position: right .5em center;
|
|
14
|
+
background-position: right 0.5em center;
|
|
15
15
|
background-repeat: no-repeat;
|
|
16
16
|
background-size: 1em;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus),
|
|
20
|
-
:where(
|
|
20
|
+
:where(
|
|
21
|
+
&:not([disabled], [readonly], [aria-disabled='true' i]):has(
|
|
22
|
+
+ [oui-combobox-content]:focus-within
|
|
23
|
+
)
|
|
24
|
+
) {
|
|
21
25
|
@include mixins.input-focus;
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
@media (hover: hover) {
|
|
25
|
-
:where(
|
|
29
|
+
:where(&:not([disabled], [readonly], [aria-disabled='true' i]):hover) {
|
|
26
30
|
@include mixins.input-hover;
|
|
27
31
|
}
|
|
28
32
|
}
|
|
29
33
|
|
|
30
|
-
:where(
|
|
34
|
+
:where(&:is([disabled], [readonly], [aria-disabled='true' i])) {
|
|
31
35
|
--oui-foreground-percentage: 25%;
|
|
32
36
|
|
|
33
37
|
font-style: italic;
|
|
34
38
|
}
|
|
35
39
|
|
|
36
|
-
:where(
|
|
40
|
+
:where(&:is([disabled], [readonly], [aria-disabled='true' i]):focus) {
|
|
37
41
|
--oui-outline-percentage: 75%;
|
|
38
42
|
}
|
|
39
43
|
|
|
40
|
-
:where(
|
|
44
|
+
:where(&:is([disabled], [aria-disabled='true' i])) {
|
|
41
45
|
--oui-background-percentage: 50%;
|
|
42
46
|
}
|
|
43
47
|
}
|
|
@@ -65,8 +69,83 @@
|
|
|
65
69
|
font-style: italic;
|
|
66
70
|
}
|
|
67
71
|
|
|
72
|
+
:where([oui-combobox-filter], [oui-combobox-header]) {
|
|
73
|
+
&::after {
|
|
74
|
+
content: '';
|
|
75
|
+
width: 100%;
|
|
76
|
+
height: 0.25em;
|
|
77
|
+
background-image: linear-gradient(to bottom, rgb(0 0 0 / 12.5%), transparent);
|
|
78
|
+
position: absolute;
|
|
79
|
+
bottom: -0.25em;
|
|
80
|
+
left: 0;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
:where([oui-combobox-filter]) {
|
|
85
|
+
padding: 0.75em;
|
|
86
|
+
background-color: var(--oui-yellow-0);
|
|
87
|
+
border-radius: 0.25em 0.25em 0 0;
|
|
88
|
+
position: relative;
|
|
89
|
+
z-index: 1;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
:where([oui-combobox-filter-input]) {
|
|
93
|
+
@include mixins.input;
|
|
94
|
+
|
|
95
|
+
--oui-background-value: var(--oui-absolute);
|
|
96
|
+
--oui-border-value: var(--oui-yellow-3);
|
|
97
|
+
|
|
98
|
+
width: 100%;
|
|
99
|
+
padding: 0.5em 0.75em;
|
|
100
|
+
outline-width: 0;
|
|
101
|
+
border-radius: 0.25em;
|
|
102
|
+
font-size: 0.875rem;
|
|
103
|
+
|
|
104
|
+
:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus) {
|
|
105
|
+
@include mixins.input-focus;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@media (hover: hover) {
|
|
109
|
+
:where(&:not([disabled], [readonly], [aria-disabled='true' i]):hover) {
|
|
110
|
+
@include mixins.input-hover;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
:where(&:is([disabled], [readonly], [aria-disabled='true' i])) {
|
|
115
|
+
--oui-foreground-percentage: 25%;
|
|
116
|
+
|
|
117
|
+
font-style: italic;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
:where(&:is([disabled], [readonly], [aria-disabled='true' i]):focus) {
|
|
121
|
+
--oui-outline-percentage: 75%;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
:where(&:is([disabled], [aria-disabled='true' i])) {
|
|
125
|
+
--oui-background-percentage: 50%;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
:where([oui-combobox-filter-label]) {
|
|
130
|
+
@include mixins.visually-hidden;
|
|
131
|
+
|
|
132
|
+
display: inline-flex;
|
|
133
|
+
position: absolute;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
:where([oui-combobox-header]) {
|
|
137
|
+
padding: 0.5em calc(0.75em / 0.75);
|
|
138
|
+
background-color: var(--oui-gray-0);
|
|
139
|
+
font-size: 0.75em;
|
|
140
|
+
font-weight: bold;
|
|
141
|
+
position: sticky;
|
|
142
|
+
top: 0;
|
|
143
|
+
z-index: 1;
|
|
144
|
+
}
|
|
145
|
+
|
|
68
146
|
:where([oui-combobox-list]) {
|
|
69
147
|
overflow: auto;
|
|
148
|
+
position: relative;
|
|
70
149
|
}
|
|
71
150
|
|
|
72
151
|
[oui-combobox-option] {
|
|
@@ -76,7 +155,7 @@
|
|
|
76
155
|
outline-offset: -4px;
|
|
77
156
|
line-height: 1.25;
|
|
78
157
|
cursor: pointer;
|
|
79
|
-
transition: .125s ease-in-out;
|
|
158
|
+
transition: 0.125s ease-in-out;
|
|
80
159
|
}
|
|
81
160
|
|
|
82
161
|
:where(&[aria-selected='true' i]) {
|
|
@@ -108,8 +187,8 @@
|
|
|
108
187
|
:where([oui-combobox-selection]) {
|
|
109
188
|
max-height: 8rem;
|
|
110
189
|
display: flex;
|
|
111
|
-
padding: .5em;
|
|
112
|
-
margin:
|
|
190
|
+
padding: 0.5em;
|
|
191
|
+
margin: -0.5em -0.5em -0.5em -0.75em;
|
|
113
192
|
flex-flow: row wrap;
|
|
114
193
|
gap: 0.5em;
|
|
115
194
|
overflow: auto;
|
|
@@ -122,9 +201,9 @@
|
|
|
122
201
|
|
|
123
202
|
border-radius: 3em;
|
|
124
203
|
padding: 0.5em 1em;
|
|
125
|
-
gap: .75em;
|
|
126
|
-
font-size: .875em;
|
|
127
|
-
transition: .125s ease-in-out;
|
|
204
|
+
gap: 0.75em;
|
|
205
|
+
font-size: 0.875em;
|
|
206
|
+
transition: 0.125s ease-in-out;
|
|
128
207
|
}
|
|
129
208
|
|
|
130
209
|
@media (hover: hover) {
|
package/src/css/mixins.scss
CHANGED
|
@@ -1,22 +1,14 @@
|
|
|
1
1
|
@mixin badge() {
|
|
2
|
-
--oui-shadow-mixed: color-mix(
|
|
3
|
-
in oklab,
|
|
4
|
-
var(--oui-shadow, var(--oui-gray-6)),
|
|
5
|
-
transparent 92.5%
|
|
6
|
-
);
|
|
2
|
+
--oui-shadow-mixed: color-mix(in oklab, var(--oui-shadow, var(--oui-gray-6)), transparent 92.5%);
|
|
7
3
|
|
|
8
|
-
|
|
4
|
+
@include shadow(var(--oui-shadow-mixed));
|
|
9
5
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
transparent 25%
|
|
17
|
-
);
|
|
18
|
-
color: var(--oui-foreground, var(--oui-gray-8));
|
|
19
|
-
line-height: 1.25;
|
|
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;
|
|
20
12
|
}
|
|
21
13
|
|
|
22
14
|
@mixin button() {
|