@alacris/ui 0.5.1 → 0.5.2
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/README.md
CHANGED
|
@@ -47,9 +47,9 @@ The published package is plain ESM. Point an import map at a pinned CDN build of
|
|
|
47
47
|
{
|
|
48
48
|
"imports": {
|
|
49
49
|
"@alacris/core": "https://cdn.jsdelivr.net/npm/@alacris/core@0.11.5/dist/alacris.js",
|
|
50
|
-
"@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.5.
|
|
51
|
-
"@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.5.
|
|
52
|
-
"@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.5.
|
|
50
|
+
"@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.5.2/src/index.js",
|
|
51
|
+
"@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.5.2/src/theme/index.js",
|
|
52
|
+
"@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.5.2/src/components/"
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
</script>
|
package/package.json
CHANGED
|
@@ -274,10 +274,25 @@ const styles = css`
|
|
|
274
274
|
.overlay {
|
|
275
275
|
position: fixed;
|
|
276
276
|
inset: 0;
|
|
277
|
+
inline-size: 100vw;
|
|
278
|
+
block-size: 100vh;
|
|
279
|
+
max-inline-size: 100vw;
|
|
280
|
+
max-block-size: 100vh;
|
|
281
|
+
margin: 0;
|
|
282
|
+
padding: 0;
|
|
283
|
+
border: none;
|
|
284
|
+
background: transparent;
|
|
285
|
+
overflow: visible;
|
|
277
286
|
z-index: ${sys.z.popup};
|
|
278
287
|
display: grid;
|
|
279
288
|
place-items: center;
|
|
280
289
|
}
|
|
290
|
+
.overlay:popover-open {
|
|
291
|
+
display: grid;
|
|
292
|
+
}
|
|
293
|
+
.overlay::backdrop {
|
|
294
|
+
display: none;
|
|
295
|
+
}
|
|
281
296
|
.scrim { position: absolute; inset: 0; background: ${t.scrim}; }
|
|
282
297
|
.modal-surface {
|
|
283
298
|
position: relative;
|
|
@@ -714,8 +729,16 @@ define('ui-date-picker', {
|
|
|
714
729
|
releaseFill(animate(el, fx.scaleIn, { duration: 'medium2', easing: 'emphasizedDecelerate' }));
|
|
715
730
|
};
|
|
716
731
|
|
|
732
|
+
const modalOverlayRef = (el) => {
|
|
733
|
+
queueMicrotask(() => {
|
|
734
|
+
try {
|
|
735
|
+
if (el.isConnected) el.showPopover?.();
|
|
736
|
+
} catch {}
|
|
737
|
+
});
|
|
738
|
+
};
|
|
739
|
+
|
|
717
740
|
const modalView = () => html`
|
|
718
|
-
<div class="overlay">
|
|
741
|
+
<div class="overlay" popover="manual" ref=${modalOverlayRef}>
|
|
719
742
|
<div class="scrim" aria-hidden="true" @click=${closePanel}></div>
|
|
720
743
|
<div class="modal-surface" part="panel" role="dialog" aria-modal="true"
|
|
721
744
|
aria-label=${() => label() || 'Choose date'}
|
|
@@ -46,10 +46,25 @@ const styles = css`
|
|
|
46
46
|
.overlay {
|
|
47
47
|
position: fixed;
|
|
48
48
|
inset: 0;
|
|
49
|
+
inline-size: 100vw;
|
|
50
|
+
block-size: 100vh;
|
|
51
|
+
max-inline-size: 100vw;
|
|
52
|
+
max-block-size: 100vh;
|
|
53
|
+
margin: 0;
|
|
54
|
+
padding: 0;
|
|
55
|
+
border: none;
|
|
56
|
+
background: transparent;
|
|
57
|
+
overflow: visible;
|
|
49
58
|
z-index: ${sys.z.modal};
|
|
50
59
|
display: grid;
|
|
51
60
|
place-items: center;
|
|
52
61
|
}
|
|
62
|
+
.overlay:popover-open {
|
|
63
|
+
display: grid;
|
|
64
|
+
}
|
|
65
|
+
.overlay::backdrop {
|
|
66
|
+
display: none;
|
|
67
|
+
}
|
|
53
68
|
.scrim { position: absolute; inset: 0; background: ${t.scrim}; }
|
|
54
69
|
.surface {
|
|
55
70
|
position: relative;
|
|
@@ -146,8 +161,16 @@ define('ui-dialog', {
|
|
|
146
161
|
releaseFill(animate(el, fx.scaleIn, { duration: 'medium2', easing: 'emphasizedDecelerate' }));
|
|
147
162
|
};
|
|
148
163
|
|
|
164
|
+
const overlayRef = (el) => {
|
|
165
|
+
queueMicrotask(() => {
|
|
166
|
+
try {
|
|
167
|
+
if (el.isConnected) el.showPopover?.();
|
|
168
|
+
} catch {}
|
|
169
|
+
});
|
|
170
|
+
};
|
|
171
|
+
|
|
149
172
|
const view = () => html`
|
|
150
|
-
<div class="overlay">
|
|
173
|
+
<div class="overlay" popover="manual" ref=${overlayRef}>
|
|
151
174
|
<div class="scrim" part="scrim" aria-hidden="true" @click=${() => requestClose('scrim')}></div>
|
|
152
175
|
<div class="surface" part="surface" role="dialog" aria-modal="true"
|
|
153
176
|
aria-labelledby=${() => (hasHeadline() ? 'headline' : null)}
|
|
@@ -47,7 +47,23 @@ const styles = css`
|
|
|
47
47
|
.overlay {
|
|
48
48
|
position: fixed;
|
|
49
49
|
inset: 0;
|
|
50
|
+
inline-size: 100vw;
|
|
51
|
+
block-size: 100vh;
|
|
52
|
+
max-inline-size: 100vw;
|
|
53
|
+
max-block-size: 100vh;
|
|
54
|
+
margin: 0;
|
|
55
|
+
padding: 0;
|
|
56
|
+
border: none;
|
|
57
|
+
background: transparent;
|
|
58
|
+
overflow: visible;
|
|
50
59
|
z-index: ${sys.z.drawer};
|
|
60
|
+
display: block;
|
|
61
|
+
}
|
|
62
|
+
.overlay:popover-open {
|
|
63
|
+
display: block;
|
|
64
|
+
}
|
|
65
|
+
.overlay::backdrop {
|
|
66
|
+
display: none;
|
|
51
67
|
}
|
|
52
68
|
.scrim { position: absolute; inset: 0; background: ${t.scrim}; }
|
|
53
69
|
.surface {
|
|
@@ -221,8 +237,16 @@ define('ui-drawer', {
|
|
|
221
237
|
});
|
|
222
238
|
};
|
|
223
239
|
|
|
240
|
+
const overlayRef = (el) => {
|
|
241
|
+
queueMicrotask(() => {
|
|
242
|
+
try {
|
|
243
|
+
if (el.isConnected) el.showPopover?.();
|
|
244
|
+
} catch {}
|
|
245
|
+
});
|
|
246
|
+
};
|
|
247
|
+
|
|
224
248
|
const overlay = () => html`
|
|
225
|
-
<div class="overlay">
|
|
249
|
+
<div class="overlay" popover="manual" ref=${overlayRef}>
|
|
226
250
|
<div class="scrim" part="scrim" aria-hidden="true"
|
|
227
251
|
ref=${(el) => { scrimEl = el; }}
|
|
228
252
|
@click=${() => requestClose('scrim')}></div>
|
|
@@ -48,11 +48,26 @@ const styles = css`
|
|
|
48
48
|
.overlay {
|
|
49
49
|
position: fixed;
|
|
50
50
|
inset: 0;
|
|
51
|
+
inline-size: 100vw;
|
|
52
|
+
block-size: 100vh;
|
|
53
|
+
max-inline-size: 100vw;
|
|
54
|
+
max-block-size: 100vh;
|
|
55
|
+
margin: 0;
|
|
56
|
+
padding: 0;
|
|
57
|
+
border: none;
|
|
58
|
+
background: transparent;
|
|
59
|
+
overflow: visible;
|
|
51
60
|
z-index: ${sys.z.modal};
|
|
52
61
|
display: flex;
|
|
53
62
|
align-items: flex-end;
|
|
54
63
|
justify-content: center;
|
|
55
64
|
}
|
|
65
|
+
.overlay:popover-open {
|
|
66
|
+
display: flex;
|
|
67
|
+
}
|
|
68
|
+
.overlay::backdrop {
|
|
69
|
+
display: none;
|
|
70
|
+
}
|
|
56
71
|
.scrim { position: absolute; inset: 0; background: ${t.scrim}; }
|
|
57
72
|
.surface {
|
|
58
73
|
position: relative;
|
|
@@ -241,8 +256,16 @@ define('ui-sheet', {
|
|
|
241
256
|
});
|
|
242
257
|
};
|
|
243
258
|
|
|
259
|
+
const overlayRef = (el) => {
|
|
260
|
+
queueMicrotask(() => {
|
|
261
|
+
try {
|
|
262
|
+
if (el.isConnected) el.showPopover?.();
|
|
263
|
+
} catch {}
|
|
264
|
+
});
|
|
265
|
+
};
|
|
266
|
+
|
|
244
267
|
const modalView = () => html`
|
|
245
|
-
<div class="overlay">
|
|
268
|
+
<div class="overlay" popover="manual" ref=${overlayRef}>
|
|
246
269
|
<div class="scrim" part="scrim" aria-hidden="true"
|
|
247
270
|
ref=${(el) => { scrimEl = el; }}
|
|
248
271
|
@click=${() => requestClose('scrim')}></div>
|
|
@@ -48,7 +48,23 @@ const styles = css`
|
|
|
48
48
|
.overlay {
|
|
49
49
|
position: fixed;
|
|
50
50
|
inset: 0;
|
|
51
|
+
inline-size: 100vw;
|
|
52
|
+
block-size: 100vh;
|
|
53
|
+
max-inline-size: 100vw;
|
|
54
|
+
max-block-size: 100vh;
|
|
55
|
+
margin: 0;
|
|
56
|
+
padding: 0;
|
|
57
|
+
border: none;
|
|
58
|
+
background: transparent;
|
|
59
|
+
overflow: visible;
|
|
51
60
|
z-index: ${sys.z.modal};
|
|
61
|
+
display: block;
|
|
62
|
+
}
|
|
63
|
+
.overlay:popover-open {
|
|
64
|
+
display: block;
|
|
65
|
+
}
|
|
66
|
+
.overlay::backdrop {
|
|
67
|
+
display: none;
|
|
52
68
|
}
|
|
53
69
|
.scrim { position: absolute; inset: 0; background: ${t.scrim}; }
|
|
54
70
|
.surface {
|
|
@@ -245,8 +261,16 @@ define('ui-side-sheet', {
|
|
|
245
261
|
sync();
|
|
246
262
|
};
|
|
247
263
|
|
|
264
|
+
const overlayRef = (el) => {
|
|
265
|
+
queueMicrotask(() => {
|
|
266
|
+
try {
|
|
267
|
+
if (el.isConnected) el.showPopover?.();
|
|
268
|
+
} catch {}
|
|
269
|
+
});
|
|
270
|
+
};
|
|
271
|
+
|
|
248
272
|
const modalView = () => html`
|
|
249
|
-
<div class="overlay">
|
|
273
|
+
<div class="overlay" popover="manual" ref=${overlayRef}>
|
|
250
274
|
<div class="scrim" part="scrim" aria-hidden="true"
|
|
251
275
|
ref=${(el) => { scrimEl = el; }}
|
|
252
276
|
@click=${() => requestClose('scrim')}></div>
|