elements-kit 0.20.0 → 0.21.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/await.d.mts +1 -1
- package/dist/{custom-elements-DK5VUcWA.d.mts → custom-elements-BGcU6ldL.d.mts} +2 -0
- package/dist/custom-elements.d.mts +1 -1
- package/dist/for.d.mts +1 -1
- package/dist/integrations/react.d.mts +1 -1
- package/dist/jsx-runtime/index.d.mts +1 -1
- package/dist/signals/index.d.mts +1 -1
- package/dist/{types-ncUK9rki.d.mts → types-CUvFIgPa.d.mts} +7 -7
- package/dist/ui/badge/badge.css +5 -5
- package/dist/ui/button/button.css +15 -15
- package/dist/ui/card/card.css +2 -2
- package/dist/ui/group/group.css +61 -0
- package/dist/ui/otp-input/index.d.mts +132 -0
- package/dist/ui/otp-input/index.mjs +328 -0
- package/dist/ui/otp-input/otp-input.css +157 -0
- package/dist/ui/overlay/index.css +52 -4
- package/dist/ui/overlay/index.d.mts +237 -63
- package/dist/ui/overlay/index.mjs +658 -66
- package/dist/ui/overlay/overlay.css +58 -2
- package/dist/ui/styles/index.css +662 -0
- package/dist/ui/styles/radius.css +7 -7
- package/dist/utilities/active-element.d.mts +1 -1
- package/dist/utilities/async.d.mts +1 -1
- package/dist/utilities/debounced.d.mts +1 -1
- package/dist/utilities/dom-lifecycle.bench.mjs +2 -2
- package/dist/utilities/element-rect.d.mts +1 -1
- package/dist/utilities/element-scroll.d.mts +1 -1
- package/dist/utilities/event-driven.d.mts +1 -1
- package/dist/utilities/event-listener.d.mts +1 -1
- package/dist/utilities/focus-within.d.mts +1 -1
- package/dist/utilities/hover.d.mts +1 -1
- package/dist/utilities/interval.d.mts +1 -1
- package/dist/utilities/location.d.mts +1 -1
- package/dist/utilities/media-devices.d.mts +1 -1
- package/dist/utilities/media-player.d.mts +1 -1
- package/dist/utilities/media-query.d.mts +1 -1
- package/dist/utilities/network.d.mts +1 -1
- package/dist/utilities/orientation.d.mts +1 -1
- package/dist/utilities/previous.d.mts +1 -1
- package/dist/utilities/promise.d.mts +1 -1
- package/dist/utilities/routing.d.mts +1 -1
- package/dist/utilities/search-params.d.mts +1 -1
- package/dist/utilities/storage.d.mts +1 -1
- package/dist/utilities/throttled.d.mts +1 -1
- package/dist/utilities/timeout.d.mts +1 -1
- package/dist/utilities/window-focus.d.mts +1 -1
- package/dist/utilities/window-size.d.mts +1 -1
- package/package.json +8 -1
|
@@ -160,9 +160,49 @@
|
|
|
160
160
|
--_gx: 1;
|
|
161
161
|
}
|
|
162
162
|
|
|
163
|
+
.x-overlay > .x-overlay-arrow {
|
|
164
|
+
display: none;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.x-overlay:where([data-placed]) > .x-overlay-arrow {
|
|
168
|
+
--_as: var(--overlay-arrow-size, 10px);
|
|
169
|
+
z-index: -1;
|
|
170
|
+
width: var(--_as);
|
|
171
|
+
height: var(--_as);
|
|
172
|
+
background-color: var(--color-material, var(--color-surface));
|
|
173
|
+
box-shadow: 0 0 0 .5px var(--neutral-a3);
|
|
174
|
+
transition: top var(--overlay-duration, .3s)
|
|
175
|
+
var(--overlay-easing, cubic-bezier(.32, .72, 0, 1)),
|
|
176
|
+
left var(--overlay-duration, .3s)
|
|
177
|
+
var(--overlay-easing, cubic-bezier(.32, .72, 0, 1));
|
|
178
|
+
display: block;
|
|
179
|
+
position: absolute;
|
|
180
|
+
rotate: 45deg;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.x-overlay:where([data-placed="bottom"]) > .x-overlay-arrow {
|
|
184
|
+
top: calc(var(--_as) / -2);
|
|
185
|
+
left: var(--overlay-arrow-x, calc(50% - var(--_as) / 2));
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.x-overlay:where([data-placed="top"]) > .x-overlay-arrow {
|
|
189
|
+
bottom: calc(var(--_as) / -2);
|
|
190
|
+
left: var(--overlay-arrow-x, calc(50% - var(--_as) / 2));
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.x-overlay:where([data-placed="right"]) > .x-overlay-arrow {
|
|
194
|
+
left: calc(var(--_as) / -2);
|
|
195
|
+
top: var(--overlay-arrow-y, calc(50% - var(--_as) / 2));
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.x-overlay:where([data-placed="left"]) > .x-overlay-arrow {
|
|
199
|
+
right: calc(var(--_as) / -2);
|
|
200
|
+
top: var(--overlay-arrow-y, calc(50% - var(--_as) / 2));
|
|
201
|
+
}
|
|
202
|
+
|
|
163
203
|
@supports (transition-behavior: allow-discrete) {
|
|
164
204
|
.x-overlay {
|
|
165
|
-
transition-property: top, left, translate, width, height, opacity, scale, display;
|
|
205
|
+
transition-property: top, left, translate, transform, width, height, opacity, scale, display;
|
|
166
206
|
transition-duration: var(--overlay-duration);
|
|
167
207
|
transition-timing-function: var(--overlay-easing);
|
|
168
208
|
transition-behavior: allow-discrete;
|
|
@@ -185,6 +225,22 @@
|
|
|
185
225
|
}
|
|
186
226
|
}
|
|
187
227
|
|
|
228
|
+
.x-overlay:where([data-placed="bottom"]) {
|
|
229
|
+
transform-origin: top;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.x-overlay:where([data-placed="top"]) {
|
|
233
|
+
transform-origin: bottom;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.x-overlay:where([data-placed="right"]) {
|
|
237
|
+
transform-origin: 0;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.x-overlay:where([data-placed="left"]) {
|
|
241
|
+
transform-origin: 100%;
|
|
242
|
+
}
|
|
243
|
+
|
|
188
244
|
.x-overlay:where([data-resize="block-start"]) {
|
|
189
245
|
--_ey: 100%;
|
|
190
246
|
}
|
|
@@ -289,7 +345,7 @@
|
|
|
289
345
|
|
|
290
346
|
@supports (overlay: auto) {
|
|
291
347
|
.x-overlay {
|
|
292
|
-
transition-property: top, left, translate, width, height, opacity, scale, display, overlay;
|
|
348
|
+
transition-property: top, left, translate, transform, width, height, opacity, scale, display, overlay;
|
|
293
349
|
}
|
|
294
350
|
|
|
295
351
|
.x-overlay::backdrop {
|