@duskmoon-dev/el-bottom-sheet 0.5.0 → 0.6.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/README.md +157 -0
- package/dist/cjs/index.js +48 -80
- package/dist/cjs/index.js.map +3 -3
- package/dist/cjs/register.js +48 -80
- package/dist/cjs/register.js.map +3 -3
- package/dist/esm/index.js +46 -78
- package/dist/esm/index.js.map +3 -3
- package/dist/esm/register.js +46 -78
- package/dist/esm/register.js.map +3 -3
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/el-dm-bottom-sheet.d.ts +3 -2
- package/dist/types/el-dm-bottom-sheet.d.ts.map +1 -1
- package/package.json +6 -6
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
// src/el-dm-bottom-sheet.ts
|
|
2
|
-
import { BaseElement, css } from "@duskmoon-dev/el-
|
|
2
|
+
import { BaseElement, css } from "@duskmoon-dev/el-base";
|
|
3
|
+
import { css as bottomsheetCSS } from "@duskmoon-dev/core/components/bottomsheet";
|
|
4
|
+
var coreStyles = bottomsheetCSS.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
|
|
3
5
|
var styles = css`
|
|
4
6
|
:host {
|
|
5
7
|
display: contents;
|
|
@@ -9,70 +11,43 @@ var styles = css`
|
|
|
9
11
|
display: none !important;
|
|
10
12
|
}
|
|
11
13
|
|
|
12
|
-
|
|
14
|
+
/* Import core bottomsheet styles */
|
|
15
|
+
${coreStyles}
|
|
16
|
+
|
|
17
|
+
/* Wrapper for fixed overlay with pointer-events control */
|
|
18
|
+
.bottomsheet-wrapper {
|
|
13
19
|
position: fixed;
|
|
14
20
|
inset: 0;
|
|
15
21
|
z-index: 1000;
|
|
16
22
|
pointer-events: none;
|
|
17
23
|
}
|
|
18
24
|
|
|
19
|
-
.
|
|
25
|
+
.bottomsheet-wrapper.open {
|
|
20
26
|
pointer-events: auto;
|
|
21
27
|
}
|
|
22
28
|
|
|
23
|
-
|
|
29
|
+
/* Override core's fixed positioning since sheet is inside a fixed wrapper */
|
|
30
|
+
.bottomsheet {
|
|
24
31
|
position: absolute;
|
|
25
|
-
|
|
26
|
-
background-color: rgba(0, 0, 0, 0.5);
|
|
27
|
-
opacity: 0;
|
|
28
|
-
transition: opacity 300ms ease;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.bottom-sheet-wrapper.open .bottom-sheet-backdrop {
|
|
32
|
-
opacity: 1;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.bottom-sheet {
|
|
36
|
-
position: absolute;
|
|
37
|
-
bottom: 0;
|
|
38
|
-
left: 0;
|
|
39
|
-
right: 0;
|
|
40
|
-
display: flex;
|
|
41
|
-
flex-direction: column;
|
|
42
|
-
max-height: 100vh;
|
|
43
|
-
max-height: 100dvh;
|
|
44
|
-
background-color: var(--color-surface);
|
|
45
|
-
border-radius: 1rem 1rem 0 0;
|
|
46
|
-
box-shadow: 0 -4px 20px rgb(0 0 0 / 0.15);
|
|
47
|
-
transform: translateY(100%);
|
|
48
|
-
transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
49
|
-
touch-action: none;
|
|
50
|
-
will-change: transform;
|
|
32
|
+
z-index: auto;
|
|
51
33
|
pointer-events: auto;
|
|
52
34
|
}
|
|
53
35
|
|
|
54
|
-
|
|
55
|
-
|
|
36
|
+
/* Override core's fixed positioning on backdrop */
|
|
37
|
+
.bottomsheet-backdrop {
|
|
38
|
+
position: absolute;
|
|
56
39
|
}
|
|
57
40
|
|
|
58
|
-
.
|
|
41
|
+
.bottomsheet.dragging {
|
|
59
42
|
transition: none;
|
|
60
43
|
}
|
|
61
44
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
justify-content: center;
|
|
66
|
-
padding: 0.75rem 0;
|
|
67
|
-
cursor: grab;
|
|
68
|
-
touch-action: none;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.bottom-sheet-handle-area:active {
|
|
72
|
-
cursor: grabbing;
|
|
45
|
+
/* We render an explicit handle bar div; hide core's ::before pseudo-element */
|
|
46
|
+
.bottomsheet-handle::before {
|
|
47
|
+
display: none;
|
|
73
48
|
}
|
|
74
49
|
|
|
75
|
-
.
|
|
50
|
+
.bottomsheet-bar {
|
|
76
51
|
width: 2.5rem;
|
|
77
52
|
height: 0.25rem;
|
|
78
53
|
background-color: var(--color-outline);
|
|
@@ -80,38 +55,31 @@ var styles = css`
|
|
|
80
55
|
transition: background-color 150ms ease;
|
|
81
56
|
}
|
|
82
57
|
|
|
83
|
-
.
|
|
58
|
+
.bottomsheet-handle:hover .bottomsheet-bar {
|
|
84
59
|
background-color: var(--color-outline-variant, var(--color-outline));
|
|
85
60
|
}
|
|
86
61
|
|
|
87
|
-
.
|
|
88
|
-
display: flex;
|
|
89
|
-
align-items: center;
|
|
90
|
-
justify-content: space-between;
|
|
91
|
-
padding: 0 1rem 0.75rem;
|
|
62
|
+
.bottomsheet-header {
|
|
92
63
|
border-bottom: 1px solid var(--color-outline);
|
|
93
64
|
}
|
|
94
65
|
|
|
95
|
-
.
|
|
66
|
+
.bottomsheet-header:empty {
|
|
96
67
|
display: none;
|
|
97
68
|
}
|
|
98
69
|
|
|
99
|
-
.
|
|
100
|
-
flex: 1;
|
|
70
|
+
.bottomsheet-content {
|
|
101
71
|
padding: 1rem;
|
|
102
|
-
overflow-y: auto;
|
|
103
|
-
overscroll-behavior: contain;
|
|
104
72
|
}
|
|
105
73
|
|
|
106
74
|
/* Focus trap indicator for modal */
|
|
107
|
-
.
|
|
75
|
+
.bottomsheet:focus-visible {
|
|
108
76
|
outline: 2px solid var(--color-primary);
|
|
109
77
|
outline-offset: -2px;
|
|
110
78
|
}
|
|
111
79
|
|
|
112
80
|
/* Safe area padding for notched devices */
|
|
113
81
|
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
|
114
|
-
.
|
|
82
|
+
.bottomsheet-content {
|
|
115
83
|
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
|
|
116
84
|
}
|
|
117
85
|
}
|
|
@@ -171,7 +139,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
171
139
|
}
|
|
172
140
|
};
|
|
173
141
|
_trapFocus(event) {
|
|
174
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
142
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
175
143
|
if (!sheet)
|
|
176
144
|
return;
|
|
177
145
|
this._focusableElements = Array.from(sheet.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
|
|
@@ -193,7 +161,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
193
161
|
const touch = event.touches[0];
|
|
194
162
|
this._startY = touch.clientY;
|
|
195
163
|
this._isDragging = true;
|
|
196
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
164
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
197
165
|
if (sheet) {
|
|
198
166
|
this._sheetHeight = sheet.getBoundingClientRect().height;
|
|
199
167
|
sheet.classList.add("dragging");
|
|
@@ -207,7 +175,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
207
175
|
const deltaY = this._currentY - this._startY;
|
|
208
176
|
if (deltaY > 0) {
|
|
209
177
|
event.preventDefault();
|
|
210
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
178
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
211
179
|
if (sheet) {
|
|
212
180
|
sheet.style.transform = `translateY(${deltaY}px)`;
|
|
213
181
|
}
|
|
@@ -218,7 +186,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
218
186
|
return;
|
|
219
187
|
this._isDragging = false;
|
|
220
188
|
const deltaY = this._currentY - this._startY;
|
|
221
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
189
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
222
190
|
if (sheet) {
|
|
223
191
|
sheet.classList.remove("dragging");
|
|
224
192
|
sheet.style.transform = "";
|
|
@@ -235,7 +203,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
235
203
|
_handleMouseDown = (event) => {
|
|
236
204
|
this._startY = event.clientY;
|
|
237
205
|
this._isDragging = true;
|
|
238
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
206
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
239
207
|
if (sheet) {
|
|
240
208
|
this._sheetHeight = sheet.getBoundingClientRect().height;
|
|
241
209
|
sheet.classList.add("dragging");
|
|
@@ -249,7 +217,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
249
217
|
this._currentY = event.clientY;
|
|
250
218
|
const deltaY = this._currentY - this._startY;
|
|
251
219
|
if (deltaY > 0) {
|
|
252
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
220
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
253
221
|
if (sheet) {
|
|
254
222
|
sheet.style.transform = `translateY(${deltaY}px)`;
|
|
255
223
|
}
|
|
@@ -260,7 +228,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
260
228
|
return;
|
|
261
229
|
this._isDragging = false;
|
|
262
230
|
const deltaY = this._currentY - this._startY;
|
|
263
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
231
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
264
232
|
if (sheet) {
|
|
265
233
|
sheet.classList.remove("dragging");
|
|
266
234
|
sheet.style.transform = "";
|
|
@@ -290,7 +258,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
290
258
|
if (nearestIndex !== this._currentSnapIndex) {
|
|
291
259
|
this._currentSnapIndex = nearestIndex;
|
|
292
260
|
const snapHeight = this._parsedSnapPoints[nearestIndex];
|
|
293
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
261
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
294
262
|
if (sheet) {
|
|
295
263
|
sheet.style.height = `${snapHeight}vh`;
|
|
296
264
|
}
|
|
@@ -308,7 +276,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
308
276
|
document.body.style.overflow = "hidden";
|
|
309
277
|
if (this._parsedSnapPoints.length > 0) {
|
|
310
278
|
this._currentSnapIndex = this._parsedSnapPoints.length - 1;
|
|
311
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
279
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
312
280
|
if (sheet) {
|
|
313
281
|
sheet.style.height = `${this._parsedSnapPoints[this._currentSnapIndex]}vh`;
|
|
314
282
|
}
|
|
@@ -316,7 +284,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
316
284
|
this.emit("open");
|
|
317
285
|
if (this.modal) {
|
|
318
286
|
requestAnimationFrame(() => {
|
|
319
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
287
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
320
288
|
sheet?.focus();
|
|
321
289
|
});
|
|
322
290
|
}
|
|
@@ -340,22 +308,22 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
340
308
|
}
|
|
341
309
|
render() {
|
|
342
310
|
return `
|
|
343
|
-
<div class="
|
|
344
|
-
${this.modal ?
|
|
311
|
+
<div class="bottomsheet-wrapper ${this.open ? "open" : ""}" part="wrapper">
|
|
312
|
+
${this.modal ? `<div class="bottomsheet-backdrop ${this.open ? "show" : ""}" part="backdrop"></div>` : ""}
|
|
345
313
|
<div
|
|
346
|
-
class="
|
|
314
|
+
class="bottomsheet ${this.open ? "show" : ""}"
|
|
347
315
|
role="dialog"
|
|
348
316
|
aria-modal="${this.modal ? "true" : "false"}"
|
|
349
317
|
tabindex="-1"
|
|
350
318
|
part="sheet"
|
|
351
319
|
>
|
|
352
|
-
<div class="
|
|
353
|
-
<div class="
|
|
320
|
+
<div class="bottomsheet-handle" part="handle-area">
|
|
321
|
+
<div class="bottomsheet-bar" part="handle"></div>
|
|
354
322
|
</div>
|
|
355
|
-
<div class="
|
|
323
|
+
<div class="bottomsheet-header" part="header">
|
|
356
324
|
<slot name="header"></slot>
|
|
357
325
|
</div>
|
|
358
|
-
<div class="
|
|
326
|
+
<div class="bottomsheet-content" part="content">
|
|
359
327
|
<slot></slot>
|
|
360
328
|
</div>
|
|
361
329
|
</div>
|
|
@@ -364,9 +332,9 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
364
332
|
}
|
|
365
333
|
update() {
|
|
366
334
|
super.update();
|
|
367
|
-
const backdrop = this.shadowRoot?.querySelector(".
|
|
335
|
+
const backdrop = this.shadowRoot?.querySelector(".bottomsheet-backdrop");
|
|
368
336
|
backdrop?.addEventListener("click", this._handleBackdropClick);
|
|
369
|
-
const handleArea = this.shadowRoot?.querySelector(".
|
|
337
|
+
const handleArea = this.shadowRoot?.querySelector(".bottomsheet-handle");
|
|
370
338
|
handleArea?.addEventListener("touchstart", this._handleTouchStart, {
|
|
371
339
|
passive: false
|
|
372
340
|
});
|
|
@@ -389,5 +357,5 @@ export {
|
|
|
389
357
|
ElDmBottomSheet
|
|
390
358
|
};
|
|
391
359
|
|
|
392
|
-
//# debugId=
|
|
360
|
+
//# debugId=612F8CD96176A9A964756E2164756E21
|
|
393
361
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/el-dm-bottom-sheet.ts", "../../src/index.ts"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"/**\n * DuskMoon Bottom Sheet Element\n *\n * A mobile bottom panel/sheet component for displaying content that slides up from the bottom.\n * Supports snap points, swipe gestures, and modal mode.\n *\n * @element el-dm-bottom-sheet\n *\n * @attr {boolean} open - Whether the bottom sheet is open\n * @attr {boolean} modal - Whether to show backdrop and trap focus\n * @attr {boolean} persistent - Prevent dismiss by outside click or swipe down\n * @attr {string} snap-points - Comma-separated list of snap point heights (e.g., \"25%,50%,100%\")\n *\n * @slot - Default slot for sheet content\n * @slot header - Header content above the drag handle\n *\n * @csspart sheet - The sheet container\n * @csspart backdrop - The backdrop overlay (modal mode)\n * @csspart handle - The drag handle\n * @csspart content - The content wrapper\n * @csspart header - The header section\n *\n * @fires open - Fired when sheet opens\n * @fires close - Fired when sheet closes\n * @fires snap - Fired when sheet snaps to a point, detail contains { height, index }\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\n\nconst styles = css`\n :host {\n display: contents;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n .bottom-sheet-wrapper {\n position: fixed;\n inset: 0;\n z-index: 1000;\n pointer-events: none;\n }\n\n .bottom-sheet-wrapper.open {\n pointer-events: auto;\n }\n\n .bottom-sheet-backdrop {\n position: absolute;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n opacity: 0;\n transition: opacity 300ms ease;\n }\n\n .bottom-sheet-wrapper.open .bottom-sheet-backdrop {\n opacity: 1;\n }\n\n .bottom-sheet {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n max-height: 100vh;\n max-height: 100dvh;\n background-color: var(--color-surface);\n border-radius: 1rem 1rem 0 0;\n box-shadow: 0 -4px 20px rgb(0 0 0 / 0.15);\n transform: translateY(100%);\n transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);\n touch-action: none;\n will-change: transform;\n pointer-events: auto;\n }\n\n .bottom-sheet-wrapper.open .bottom-sheet {\n transform: translateY(0);\n }\n\n .bottom-sheet.dragging {\n transition: none;\n }\n\n .bottom-sheet-handle-area {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0.75rem 0;\n cursor: grab;\n touch-action: none;\n }\n\n .bottom-sheet-handle-area:active {\n cursor: grabbing;\n }\n\n .bottom-sheet-handle {\n width: 2.5rem;\n height: 0.25rem;\n background-color: var(--color-outline);\n border-radius: 0.125rem;\n transition: background-color 150ms ease;\n }\n\n .bottom-sheet-handle-area:hover .bottom-sheet-handle {\n background-color: var(--color-outline-variant, var(--color-outline));\n }\n\n .bottom-sheet-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 1rem 0.75rem;\n border-bottom: 1px solid var(--color-outline);\n }\n\n .bottom-sheet-header:empty {\n display: none;\n }\n\n .bottom-sheet-content {\n flex: 1;\n padding: 1rem;\n overflow-y: auto;\n overscroll-behavior: contain;\n }\n\n /* Focus trap indicator for modal */\n .bottom-sheet:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n }\n\n /* Safe area padding for notched devices */\n @supports (padding-bottom: env(safe-area-inset-bottom)) {\n .bottom-sheet-content {\n padding-bottom: calc(1rem + env(safe-area-inset-bottom));\n }\n }\n`;\n\ninterface SnapEvent {\n height: string;\n index: number;\n}\n\nexport class ElDmBottomSheet extends BaseElement {\n static properties = {\n open: { type: Boolean, reflect: true },\n modal: { type: Boolean, reflect: true },\n persistent: { type: Boolean, reflect: true },\n snapPoints: { type: String, reflect: true, attribute: 'snap-points' },\n };\n\n declare open: boolean;\n declare modal: boolean;\n declare persistent: boolean;\n declare snapPoints: string;\n\n private _startY = 0;\n private _currentY = 0;\n private _sheetHeight = 0;\n private _isDragging = false;\n private _parsedSnapPoints: number[] = [];\n private _currentSnapIndex = -1;\n private _focusableElements: HTMLElement[] = [];\n private _previouslyFocused: HTMLElement | null = null;\n\n constructor() {\n super();\n this.attachStyles(styles);\n }\n\n connectedCallback(): void {\n super.connectedCallback?.();\n this._parseSnapPoints();\n }\n\n private _parseSnapPoints(): void {\n if (!this.snapPoints) {\n this._parsedSnapPoints = [100];\n return;\n }\n\n this._parsedSnapPoints = this.snapPoints\n .split(',')\n .map((point) => {\n const trimmed = point.trim();\n if (trimmed.endsWith('%')) {\n return parseFloat(trimmed);\n }\n return parseFloat(trimmed);\n })\n .filter((point) => !isNaN(point) && point > 0 && point <= 100)\n .sort((a, b) => a - b);\n\n if (this._parsedSnapPoints.length === 0) {\n this._parsedSnapPoints = [100];\n }\n }\n\n private _handleBackdropClick = (event: Event): void => {\n if (!this.persistent && event.target === event.currentTarget) {\n this.hide();\n }\n };\n\n private _handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key === 'Escape' && !this.persistent) {\n this.hide();\n return;\n }\n\n if (this.modal && event.key === 'Tab') {\n this._trapFocus(event);\n }\n };\n\n private _trapFocus(event: KeyboardEvent): void {\n const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n if (!sheet) return;\n\n this._focusableElements = Array.from(\n sheet.querySelectorAll<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n ),\n );\n\n const slotContent = this.querySelectorAll<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n this._focusableElements.push(...Array.from(slotContent));\n\n if (this._focusableElements.length === 0) return;\n\n const firstFocusable = this._focusableElements[0];\n const lastFocusable = this._focusableElements[this._focusableElements.length - 1];\n\n if (event.shiftKey && document.activeElement === firstFocusable) {\n event.preventDefault();\n lastFocusable.focus();\n } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n event.preventDefault();\n firstFocusable.focus();\n }\n }\n\n private _handleTouchStart = (event: TouchEvent): void => {\n const touch = event.touches[0];\n this._startY = touch.clientY;\n this._isDragging = true;\n\n const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n if (sheet) {\n this._sheetHeight = sheet.getBoundingClientRect().height;\n sheet.classList.add('dragging');\n }\n };\n\n private _handleTouchMove = (event: TouchEvent): void => {\n if (!this._isDragging) return;\n\n const touch = event.touches[0];\n this._currentY = touch.clientY;\n const deltaY = this._currentY - this._startY;\n\n if (deltaY > 0) {\n event.preventDefault();\n const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n if (sheet) {\n sheet.style.transform = `translateY(${deltaY}px)`;\n }\n }\n };\n\n private _handleTouchEnd = (): void => {\n if (!this._isDragging) return;\n\n this._isDragging = false;\n const deltaY = this._currentY - this._startY;\n const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n\n if (sheet) {\n sheet.classList.remove('dragging');\n sheet.style.transform = '';\n }\n\n const threshold = this._sheetHeight * 0.25;\n\n if (!this.persistent && deltaY > threshold) {\n this.hide();\n } else if (this._parsedSnapPoints.length > 1) {\n this._snapToNearestPoint(deltaY);\n }\n\n this._startY = 0;\n this._currentY = 0;\n };\n\n private _handleMouseDown = (event: MouseEvent): void => {\n this._startY = event.clientY;\n this._isDragging = true;\n\n const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n if (sheet) {\n this._sheetHeight = sheet.getBoundingClientRect().height;\n sheet.classList.add('dragging');\n }\n\n document.addEventListener('mousemove', this._handleMouseMove);\n document.addEventListener('mouseup', this._handleMouseUp);\n };\n\n private _handleMouseMove = (event: MouseEvent): void => {\n if (!this._isDragging) return;\n\n this._currentY = event.clientY;\n const deltaY = this._currentY - this._startY;\n\n if (deltaY > 0) {\n const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n if (sheet) {\n sheet.style.transform = `translateY(${deltaY}px)`;\n }\n }\n };\n\n private _handleMouseUp = (): void => {\n if (!this._isDragging) return;\n\n this._isDragging = false;\n const deltaY = this._currentY - this._startY;\n const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n\n if (sheet) {\n sheet.classList.remove('dragging');\n sheet.style.transform = '';\n }\n\n document.removeEventListener('mousemove', this._handleMouseMove);\n document.removeEventListener('mouseup', this._handleMouseUp);\n\n const threshold = this._sheetHeight * 0.25;\n\n if (!this.persistent && deltaY > threshold) {\n this.hide();\n } else if (this._parsedSnapPoints.length > 1) {\n this._snapToNearestPoint(deltaY);\n }\n\n this._startY = 0;\n this._currentY = 0;\n };\n\n private _snapToNearestPoint(deltaY: number): void {\n const currentHeightPercent = ((this._sheetHeight - deltaY) / window.innerHeight) * 100;\n\n let nearestIndex = 0;\n let nearestDistance = Math.abs(this._parsedSnapPoints[0] - currentHeightPercent);\n\n for (let i = 1; i < this._parsedSnapPoints.length; i++) {\n const distance = Math.abs(this._parsedSnapPoints[i] - currentHeightPercent);\n if (distance < nearestDistance) {\n nearestDistance = distance;\n nearestIndex = i;\n }\n }\n\n if (nearestIndex !== this._currentSnapIndex) {\n this._currentSnapIndex = nearestIndex;\n const snapHeight = this._parsedSnapPoints[nearestIndex];\n\n const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n if (sheet) {\n sheet.style.height = `${snapHeight}vh`;\n }\n\n this.emit<SnapEvent>('snap', {\n height: `${snapHeight}%`,\n index: nearestIndex,\n });\n }\n }\n\n show(): void {\n this._parseSnapPoints();\n this._previouslyFocused = document.activeElement as HTMLElement;\n this.open = true;\n document.addEventListener('keydown', this._handleKeyDown);\n document.body.style.overflow = 'hidden';\n\n if (this._parsedSnapPoints.length > 0) {\n this._currentSnapIndex = this._parsedSnapPoints.length - 1;\n const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n if (sheet) {\n sheet.style.height = `${this._parsedSnapPoints[this._currentSnapIndex]}vh`;\n }\n }\n\n this.emit('open');\n\n if (this.modal) {\n requestAnimationFrame(() => {\n const sheet = this.shadowRoot?.querySelector('.bottom-sheet') as HTMLElement;\n sheet?.focus();\n });\n }\n }\n\n hide(): void {\n this.open = false;\n document.removeEventListener('keydown', this._handleKeyDown);\n document.body.style.overflow = '';\n\n this.emit('close');\n\n if (this._previouslyFocused) {\n this._previouslyFocused.focus();\n this._previouslyFocused = null;\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n document.removeEventListener('keydown', this._handleKeyDown);\n document.removeEventListener('mousemove', this._handleMouseMove);\n document.removeEventListener('mouseup', this._handleMouseUp);\n document.body.style.overflow = '';\n }\n\n render(): string {\n return `\n <div class=\"bottom-sheet-wrapper ${this.open ? 'open' : ''}\" part=\"wrapper\">\n ${this.modal ? '<div class=\"bottom-sheet-backdrop\" part=\"backdrop\"></div>' : ''}\n <div\n class=\"bottom-sheet\"\n role=\"dialog\"\n aria-modal=\"${this.modal ? 'true' : 'false'}\"\n tabindex=\"-1\"\n part=\"sheet\"\n >\n <div class=\"bottom-sheet-handle-area\" part=\"handle-area\">\n <div class=\"bottom-sheet-handle\" part=\"handle\"></div>\n </div>\n <div class=\"bottom-sheet-header\" part=\"header\">\n <slot name=\"header\"></slot>\n </div>\n <div class=\"bottom-sheet-content\" part=\"content\">\n <slot></slot>\n </div>\n </div>\n </div>\n `;\n }\n\n update(): void {\n super.update();\n\n const backdrop = this.shadowRoot?.querySelector('.bottom-sheet-backdrop');\n backdrop?.addEventListener('click', this._handleBackdropClick);\n\n const handleArea = this.shadowRoot?.querySelector('.bottom-sheet-handle-area');\n handleArea?.addEventListener('touchstart', this._handleTouchStart as EventListener, {\n passive: false,\n });\n handleArea?.addEventListener('touchmove', this._handleTouchMove as EventListener, {\n passive: false,\n });\n handleArea?.addEventListener('touchend', this._handleTouchEnd);\n handleArea?.addEventListener('mousedown', this._handleMouseDown as EventListener);\n }\n}\n",
|
|
5
|
+
"/**\n * DuskMoon Bottom Sheet Element\n *\n * A mobile bottom panel/sheet component for displaying content that slides up from the bottom.\n * Supports snap points, swipe gestures, and modal mode.\n *\n * @element el-dm-bottom-sheet\n *\n * @attr {boolean} open - Whether the bottom sheet is open\n * @attr {boolean} modal - Whether to show backdrop and trap focus\n * @attr {boolean} persistent - Prevent dismiss by outside click or swipe down\n * @attr {string} snap-points - Comma-separated list of snap point heights (e.g., \"25%,50%,100%\")\n *\n * @slot - Default slot for sheet content\n * @slot header - Header content above the drag handle\n *\n * @csspart sheet - The sheet container\n * @csspart backdrop - The backdrop overlay (modal mode)\n * @csspart handle - The drag handle bar\n * @csspart handle-area - The drag handle touch area\n * @csspart content - The content wrapper\n * @csspart header - The header section\n *\n * @fires open - Fired when sheet opens\n * @fires close - Fired when sheet closes\n * @fires snap - Fired when sheet snaps to a point, detail contains { height, index }\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-base';\nimport { css as bottomsheetCSS } from '@duskmoon-dev/core/components/bottomsheet';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = bottomsheetCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\n\nconst styles = css`\n :host {\n display: contents;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n /* Import core bottomsheet styles */\n ${coreStyles}\n\n /* Wrapper for fixed overlay with pointer-events control */\n .bottomsheet-wrapper {\n position: fixed;\n inset: 0;\n z-index: 1000;\n pointer-events: none;\n }\n\n .bottomsheet-wrapper.open {\n pointer-events: auto;\n }\n\n /* Override core's fixed positioning since sheet is inside a fixed wrapper */\n .bottomsheet {\n position: absolute;\n z-index: auto;\n pointer-events: auto;\n }\n\n /* Override core's fixed positioning on backdrop */\n .bottomsheet-backdrop {\n position: absolute;\n }\n\n .bottomsheet.dragging {\n transition: none;\n }\n\n /* We render an explicit handle bar div; hide core's ::before pseudo-element */\n .bottomsheet-handle::before {\n display: none;\n }\n\n .bottomsheet-bar {\n width: 2.5rem;\n height: 0.25rem;\n background-color: var(--color-outline);\n border-radius: 0.125rem;\n transition: background-color 150ms ease;\n }\n\n .bottomsheet-handle:hover .bottomsheet-bar {\n background-color: var(--color-outline-variant, var(--color-outline));\n }\n\n .bottomsheet-header {\n border-bottom: 1px solid var(--color-outline);\n }\n\n .bottomsheet-header:empty {\n display: none;\n }\n\n .bottomsheet-content {\n padding: 1rem;\n }\n\n /* Focus trap indicator for modal */\n .bottomsheet:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n }\n\n /* Safe area padding for notched devices */\n @supports (padding-bottom: env(safe-area-inset-bottom)) {\n .bottomsheet-content {\n padding-bottom: calc(1rem + env(safe-area-inset-bottom));\n }\n }\n`;\n\ninterface SnapEvent {\n height: string;\n index: number;\n}\n\nexport class ElDmBottomSheet extends BaseElement {\n static properties = {\n open: { type: Boolean, reflect: true },\n modal: { type: Boolean, reflect: true },\n persistent: { type: Boolean, reflect: true },\n snapPoints: { type: String, reflect: true, attribute: 'snap-points' },\n };\n\n declare open: boolean;\n declare modal: boolean;\n declare persistent: boolean;\n declare snapPoints: string;\n\n private _startY = 0;\n private _currentY = 0;\n private _sheetHeight = 0;\n private _isDragging = false;\n private _parsedSnapPoints: number[] = [];\n private _currentSnapIndex = -1;\n private _focusableElements: HTMLElement[] = [];\n private _previouslyFocused: HTMLElement | null = null;\n\n constructor() {\n super();\n this.attachStyles(styles);\n }\n\n connectedCallback(): void {\n super.connectedCallback?.();\n this._parseSnapPoints();\n }\n\n private _parseSnapPoints(): void {\n if (!this.snapPoints) {\n this._parsedSnapPoints = [100];\n return;\n }\n\n this._parsedSnapPoints = this.snapPoints\n .split(',')\n .map((point) => {\n const trimmed = point.trim();\n if (trimmed.endsWith('%')) {\n return parseFloat(trimmed);\n }\n return parseFloat(trimmed);\n })\n .filter((point) => !isNaN(point) && point > 0 && point <= 100)\n .sort((a, b) => a - b);\n\n if (this._parsedSnapPoints.length === 0) {\n this._parsedSnapPoints = [100];\n }\n }\n\n private _handleBackdropClick = (event: Event): void => {\n if (!this.persistent && event.target === event.currentTarget) {\n this.hide();\n }\n };\n\n private _handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key === 'Escape' && !this.persistent) {\n this.hide();\n return;\n }\n\n if (this.modal && event.key === 'Tab') {\n this._trapFocus(event);\n }\n };\n\n private _trapFocus(event: KeyboardEvent): void {\n const sheet = this.shadowRoot?.querySelector('.bottomsheet') as HTMLElement;\n if (!sheet) return;\n\n this._focusableElements = Array.from(\n sheet.querySelectorAll<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n ),\n );\n\n const slotContent = this.querySelectorAll<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n this._focusableElements.push(...Array.from(slotContent));\n\n if (this._focusableElements.length === 0) return;\n\n const firstFocusable = this._focusableElements[0];\n const lastFocusable = this._focusableElements[this._focusableElements.length - 1];\n\n if (event.shiftKey && document.activeElement === firstFocusable) {\n event.preventDefault();\n lastFocusable.focus();\n } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n event.preventDefault();\n firstFocusable.focus();\n }\n }\n\n private _handleTouchStart = (event: TouchEvent): void => {\n const touch = event.touches[0];\n this._startY = touch.clientY;\n this._isDragging = true;\n\n const sheet = this.shadowRoot?.querySelector('.bottomsheet') as HTMLElement;\n if (sheet) {\n this._sheetHeight = sheet.getBoundingClientRect().height;\n sheet.classList.add('dragging');\n }\n };\n\n private _handleTouchMove = (event: TouchEvent): void => {\n if (!this._isDragging) return;\n\n const touch = event.touches[0];\n this._currentY = touch.clientY;\n const deltaY = this._currentY - this._startY;\n\n if (deltaY > 0) {\n event.preventDefault();\n const sheet = this.shadowRoot?.querySelector('.bottomsheet') as HTMLElement;\n if (sheet) {\n sheet.style.transform = `translateY(${deltaY}px)`;\n }\n }\n };\n\n private _handleTouchEnd = (): void => {\n if (!this._isDragging) return;\n\n this._isDragging = false;\n const deltaY = this._currentY - this._startY;\n const sheet = this.shadowRoot?.querySelector('.bottomsheet') as HTMLElement;\n\n if (sheet) {\n sheet.classList.remove('dragging');\n sheet.style.transform = '';\n }\n\n const threshold = this._sheetHeight * 0.25;\n\n if (!this.persistent && deltaY > threshold) {\n this.hide();\n } else if (this._parsedSnapPoints.length > 1) {\n this._snapToNearestPoint(deltaY);\n }\n\n this._startY = 0;\n this._currentY = 0;\n };\n\n private _handleMouseDown = (event: MouseEvent): void => {\n this._startY = event.clientY;\n this._isDragging = true;\n\n const sheet = this.shadowRoot?.querySelector('.bottomsheet') as HTMLElement;\n if (sheet) {\n this._sheetHeight = sheet.getBoundingClientRect().height;\n sheet.classList.add('dragging');\n }\n\n document.addEventListener('mousemove', this._handleMouseMove);\n document.addEventListener('mouseup', this._handleMouseUp);\n };\n\n private _handleMouseMove = (event: MouseEvent): void => {\n if (!this._isDragging) return;\n\n this._currentY = event.clientY;\n const deltaY = this._currentY - this._startY;\n\n if (deltaY > 0) {\n const sheet = this.shadowRoot?.querySelector('.bottomsheet') as HTMLElement;\n if (sheet) {\n sheet.style.transform = `translateY(${deltaY}px)`;\n }\n }\n };\n\n private _handleMouseUp = (): void => {\n if (!this._isDragging) return;\n\n this._isDragging = false;\n const deltaY = this._currentY - this._startY;\n const sheet = this.shadowRoot?.querySelector('.bottomsheet') as HTMLElement;\n\n if (sheet) {\n sheet.classList.remove('dragging');\n sheet.style.transform = '';\n }\n\n document.removeEventListener('mousemove', this._handleMouseMove);\n document.removeEventListener('mouseup', this._handleMouseUp);\n\n const threshold = this._sheetHeight * 0.25;\n\n if (!this.persistent && deltaY > threshold) {\n this.hide();\n } else if (this._parsedSnapPoints.length > 1) {\n this._snapToNearestPoint(deltaY);\n }\n\n this._startY = 0;\n this._currentY = 0;\n };\n\n private _snapToNearestPoint(deltaY: number): void {\n const currentHeightPercent = ((this._sheetHeight - deltaY) / window.innerHeight) * 100;\n\n let nearestIndex = 0;\n let nearestDistance = Math.abs(this._parsedSnapPoints[0] - currentHeightPercent);\n\n for (let i = 1; i < this._parsedSnapPoints.length; i++) {\n const distance = Math.abs(this._parsedSnapPoints[i] - currentHeightPercent);\n if (distance < nearestDistance) {\n nearestDistance = distance;\n nearestIndex = i;\n }\n }\n\n if (nearestIndex !== this._currentSnapIndex) {\n this._currentSnapIndex = nearestIndex;\n const snapHeight = this._parsedSnapPoints[nearestIndex];\n\n const sheet = this.shadowRoot?.querySelector('.bottomsheet') as HTMLElement;\n if (sheet) {\n sheet.style.height = `${snapHeight}vh`;\n }\n\n this.emit<SnapEvent>('snap', {\n height: `${snapHeight}%`,\n index: nearestIndex,\n });\n }\n }\n\n show(): void {\n this._parseSnapPoints();\n this._previouslyFocused = document.activeElement as HTMLElement;\n this.open = true;\n document.addEventListener('keydown', this._handleKeyDown);\n document.body.style.overflow = 'hidden';\n\n if (this._parsedSnapPoints.length > 0) {\n this._currentSnapIndex = this._parsedSnapPoints.length - 1;\n const sheet = this.shadowRoot?.querySelector('.bottomsheet') as HTMLElement;\n if (sheet) {\n sheet.style.height = `${this._parsedSnapPoints[this._currentSnapIndex]}vh`;\n }\n }\n\n this.emit('open');\n\n if (this.modal) {\n requestAnimationFrame(() => {\n const sheet = this.shadowRoot?.querySelector('.bottomsheet') as HTMLElement;\n sheet?.focus();\n });\n }\n }\n\n hide(): void {\n this.open = false;\n document.removeEventListener('keydown', this._handleKeyDown);\n document.body.style.overflow = '';\n\n this.emit('close');\n\n if (this._previouslyFocused) {\n this._previouslyFocused.focus();\n this._previouslyFocused = null;\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n document.removeEventListener('keydown', this._handleKeyDown);\n document.removeEventListener('mousemove', this._handleMouseMove);\n document.removeEventListener('mouseup', this._handleMouseUp);\n document.body.style.overflow = '';\n }\n\n render(): string {\n return `\n <div class=\"bottomsheet-wrapper ${this.open ? 'open' : ''}\" part=\"wrapper\">\n ${this.modal ? `<div class=\"bottomsheet-backdrop ${this.open ? 'show' : ''}\" part=\"backdrop\"></div>` : ''}\n <div\n class=\"bottomsheet ${this.open ? 'show' : ''}\"\n role=\"dialog\"\n aria-modal=\"${this.modal ? 'true' : 'false'}\"\n tabindex=\"-1\"\n part=\"sheet\"\n >\n <div class=\"bottomsheet-handle\" part=\"handle-area\">\n <div class=\"bottomsheet-bar\" part=\"handle\"></div>\n </div>\n <div class=\"bottomsheet-header\" part=\"header\">\n <slot name=\"header\"></slot>\n </div>\n <div class=\"bottomsheet-content\" part=\"content\">\n <slot></slot>\n </div>\n </div>\n </div>\n `;\n }\n\n update(): void {\n super.update();\n\n const backdrop = this.shadowRoot?.querySelector('.bottomsheet-backdrop');\n backdrop?.addEventListener('click', this._handleBackdropClick);\n\n const handleArea = this.shadowRoot?.querySelector('.bottomsheet-handle');\n handleArea?.addEventListener('touchstart', this._handleTouchStart as EventListener, {\n passive: false,\n });\n handleArea?.addEventListener('touchmove', this._handleTouchMove as EventListener, {\n passive: false,\n });\n handleArea?.addEventListener('touchend', this._handleTouchEnd);\n handleArea?.addEventListener('mousedown', this._handleMouseDown as EventListener);\n }\n}\n",
|
|
6
6
|
"import { ElDmBottomSheet } from './el-dm-bottom-sheet.js';\n\nexport { ElDmBottomSheet };\n\nexport function register(): void {\n if (!customElements.get('el-dm-bottom-sheet')) {\n customElements.define('el-dm-bottom-sheet', ElDmBottomSheet);\n }\n}\n"
|
|
7
7
|
],
|
|
8
|
-
"mappings": ";
|
|
9
|
-
"debugId": "
|
|
8
|
+
"mappings": "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",
|
|
9
|
+
"debugId": "612F8CD96176A9A964756E2164756E21",
|
|
10
10
|
"names": []
|
|
11
11
|
}
|
package/dist/esm/register.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
// src/el-dm-bottom-sheet.ts
|
|
2
|
-
import { BaseElement, css } from "@duskmoon-dev/el-
|
|
2
|
+
import { BaseElement, css } from "@duskmoon-dev/el-base";
|
|
3
|
+
import { css as bottomsheetCSS } from "@duskmoon-dev/core/components/bottomsheet";
|
|
4
|
+
var coreStyles = bottomsheetCSS.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
|
|
3
5
|
var styles = css`
|
|
4
6
|
:host {
|
|
5
7
|
display: contents;
|
|
@@ -9,70 +11,43 @@ var styles = css`
|
|
|
9
11
|
display: none !important;
|
|
10
12
|
}
|
|
11
13
|
|
|
12
|
-
|
|
14
|
+
/* Import core bottomsheet styles */
|
|
15
|
+
${coreStyles}
|
|
16
|
+
|
|
17
|
+
/* Wrapper for fixed overlay with pointer-events control */
|
|
18
|
+
.bottomsheet-wrapper {
|
|
13
19
|
position: fixed;
|
|
14
20
|
inset: 0;
|
|
15
21
|
z-index: 1000;
|
|
16
22
|
pointer-events: none;
|
|
17
23
|
}
|
|
18
24
|
|
|
19
|
-
.
|
|
25
|
+
.bottomsheet-wrapper.open {
|
|
20
26
|
pointer-events: auto;
|
|
21
27
|
}
|
|
22
28
|
|
|
23
|
-
|
|
29
|
+
/* Override core's fixed positioning since sheet is inside a fixed wrapper */
|
|
30
|
+
.bottomsheet {
|
|
24
31
|
position: absolute;
|
|
25
|
-
|
|
26
|
-
background-color: rgba(0, 0, 0, 0.5);
|
|
27
|
-
opacity: 0;
|
|
28
|
-
transition: opacity 300ms ease;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.bottom-sheet-wrapper.open .bottom-sheet-backdrop {
|
|
32
|
-
opacity: 1;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.bottom-sheet {
|
|
36
|
-
position: absolute;
|
|
37
|
-
bottom: 0;
|
|
38
|
-
left: 0;
|
|
39
|
-
right: 0;
|
|
40
|
-
display: flex;
|
|
41
|
-
flex-direction: column;
|
|
42
|
-
max-height: 100vh;
|
|
43
|
-
max-height: 100dvh;
|
|
44
|
-
background-color: var(--color-surface);
|
|
45
|
-
border-radius: 1rem 1rem 0 0;
|
|
46
|
-
box-shadow: 0 -4px 20px rgb(0 0 0 / 0.15);
|
|
47
|
-
transform: translateY(100%);
|
|
48
|
-
transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
49
|
-
touch-action: none;
|
|
50
|
-
will-change: transform;
|
|
32
|
+
z-index: auto;
|
|
51
33
|
pointer-events: auto;
|
|
52
34
|
}
|
|
53
35
|
|
|
54
|
-
|
|
55
|
-
|
|
36
|
+
/* Override core's fixed positioning on backdrop */
|
|
37
|
+
.bottomsheet-backdrop {
|
|
38
|
+
position: absolute;
|
|
56
39
|
}
|
|
57
40
|
|
|
58
|
-
.
|
|
41
|
+
.bottomsheet.dragging {
|
|
59
42
|
transition: none;
|
|
60
43
|
}
|
|
61
44
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
justify-content: center;
|
|
66
|
-
padding: 0.75rem 0;
|
|
67
|
-
cursor: grab;
|
|
68
|
-
touch-action: none;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.bottom-sheet-handle-area:active {
|
|
72
|
-
cursor: grabbing;
|
|
45
|
+
/* We render an explicit handle bar div; hide core's ::before pseudo-element */
|
|
46
|
+
.bottomsheet-handle::before {
|
|
47
|
+
display: none;
|
|
73
48
|
}
|
|
74
49
|
|
|
75
|
-
.
|
|
50
|
+
.bottomsheet-bar {
|
|
76
51
|
width: 2.5rem;
|
|
77
52
|
height: 0.25rem;
|
|
78
53
|
background-color: var(--color-outline);
|
|
@@ -80,38 +55,31 @@ var styles = css`
|
|
|
80
55
|
transition: background-color 150ms ease;
|
|
81
56
|
}
|
|
82
57
|
|
|
83
|
-
.
|
|
58
|
+
.bottomsheet-handle:hover .bottomsheet-bar {
|
|
84
59
|
background-color: var(--color-outline-variant, var(--color-outline));
|
|
85
60
|
}
|
|
86
61
|
|
|
87
|
-
.
|
|
88
|
-
display: flex;
|
|
89
|
-
align-items: center;
|
|
90
|
-
justify-content: space-between;
|
|
91
|
-
padding: 0 1rem 0.75rem;
|
|
62
|
+
.bottomsheet-header {
|
|
92
63
|
border-bottom: 1px solid var(--color-outline);
|
|
93
64
|
}
|
|
94
65
|
|
|
95
|
-
.
|
|
66
|
+
.bottomsheet-header:empty {
|
|
96
67
|
display: none;
|
|
97
68
|
}
|
|
98
69
|
|
|
99
|
-
.
|
|
100
|
-
flex: 1;
|
|
70
|
+
.bottomsheet-content {
|
|
101
71
|
padding: 1rem;
|
|
102
|
-
overflow-y: auto;
|
|
103
|
-
overscroll-behavior: contain;
|
|
104
72
|
}
|
|
105
73
|
|
|
106
74
|
/* Focus trap indicator for modal */
|
|
107
|
-
.
|
|
75
|
+
.bottomsheet:focus-visible {
|
|
108
76
|
outline: 2px solid var(--color-primary);
|
|
109
77
|
outline-offset: -2px;
|
|
110
78
|
}
|
|
111
79
|
|
|
112
80
|
/* Safe area padding for notched devices */
|
|
113
81
|
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
|
114
|
-
.
|
|
82
|
+
.bottomsheet-content {
|
|
115
83
|
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
|
|
116
84
|
}
|
|
117
85
|
}
|
|
@@ -171,7 +139,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
171
139
|
}
|
|
172
140
|
};
|
|
173
141
|
_trapFocus(event) {
|
|
174
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
142
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
175
143
|
if (!sheet)
|
|
176
144
|
return;
|
|
177
145
|
this._focusableElements = Array.from(sheet.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
|
|
@@ -193,7 +161,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
193
161
|
const touch = event.touches[0];
|
|
194
162
|
this._startY = touch.clientY;
|
|
195
163
|
this._isDragging = true;
|
|
196
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
164
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
197
165
|
if (sheet) {
|
|
198
166
|
this._sheetHeight = sheet.getBoundingClientRect().height;
|
|
199
167
|
sheet.classList.add("dragging");
|
|
@@ -207,7 +175,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
207
175
|
const deltaY = this._currentY - this._startY;
|
|
208
176
|
if (deltaY > 0) {
|
|
209
177
|
event.preventDefault();
|
|
210
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
178
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
211
179
|
if (sheet) {
|
|
212
180
|
sheet.style.transform = `translateY(${deltaY}px)`;
|
|
213
181
|
}
|
|
@@ -218,7 +186,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
218
186
|
return;
|
|
219
187
|
this._isDragging = false;
|
|
220
188
|
const deltaY = this._currentY - this._startY;
|
|
221
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
189
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
222
190
|
if (sheet) {
|
|
223
191
|
sheet.classList.remove("dragging");
|
|
224
192
|
sheet.style.transform = "";
|
|
@@ -235,7 +203,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
235
203
|
_handleMouseDown = (event) => {
|
|
236
204
|
this._startY = event.clientY;
|
|
237
205
|
this._isDragging = true;
|
|
238
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
206
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
239
207
|
if (sheet) {
|
|
240
208
|
this._sheetHeight = sheet.getBoundingClientRect().height;
|
|
241
209
|
sheet.classList.add("dragging");
|
|
@@ -249,7 +217,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
249
217
|
this._currentY = event.clientY;
|
|
250
218
|
const deltaY = this._currentY - this._startY;
|
|
251
219
|
if (deltaY > 0) {
|
|
252
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
220
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
253
221
|
if (sheet) {
|
|
254
222
|
sheet.style.transform = `translateY(${deltaY}px)`;
|
|
255
223
|
}
|
|
@@ -260,7 +228,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
260
228
|
return;
|
|
261
229
|
this._isDragging = false;
|
|
262
230
|
const deltaY = this._currentY - this._startY;
|
|
263
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
231
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
264
232
|
if (sheet) {
|
|
265
233
|
sheet.classList.remove("dragging");
|
|
266
234
|
sheet.style.transform = "";
|
|
@@ -290,7 +258,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
290
258
|
if (nearestIndex !== this._currentSnapIndex) {
|
|
291
259
|
this._currentSnapIndex = nearestIndex;
|
|
292
260
|
const snapHeight = this._parsedSnapPoints[nearestIndex];
|
|
293
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
261
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
294
262
|
if (sheet) {
|
|
295
263
|
sheet.style.height = `${snapHeight}vh`;
|
|
296
264
|
}
|
|
@@ -308,7 +276,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
308
276
|
document.body.style.overflow = "hidden";
|
|
309
277
|
if (this._parsedSnapPoints.length > 0) {
|
|
310
278
|
this._currentSnapIndex = this._parsedSnapPoints.length - 1;
|
|
311
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
279
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
312
280
|
if (sheet) {
|
|
313
281
|
sheet.style.height = `${this._parsedSnapPoints[this._currentSnapIndex]}vh`;
|
|
314
282
|
}
|
|
@@ -316,7 +284,7 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
316
284
|
this.emit("open");
|
|
317
285
|
if (this.modal) {
|
|
318
286
|
requestAnimationFrame(() => {
|
|
319
|
-
const sheet = this.shadowRoot?.querySelector(".
|
|
287
|
+
const sheet = this.shadowRoot?.querySelector(".bottomsheet");
|
|
320
288
|
sheet?.focus();
|
|
321
289
|
});
|
|
322
290
|
}
|
|
@@ -340,22 +308,22 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
340
308
|
}
|
|
341
309
|
render() {
|
|
342
310
|
return `
|
|
343
|
-
<div class="
|
|
344
|
-
${this.modal ?
|
|
311
|
+
<div class="bottomsheet-wrapper ${this.open ? "open" : ""}" part="wrapper">
|
|
312
|
+
${this.modal ? `<div class="bottomsheet-backdrop ${this.open ? "show" : ""}" part="backdrop"></div>` : ""}
|
|
345
313
|
<div
|
|
346
|
-
class="
|
|
314
|
+
class="bottomsheet ${this.open ? "show" : ""}"
|
|
347
315
|
role="dialog"
|
|
348
316
|
aria-modal="${this.modal ? "true" : "false"}"
|
|
349
317
|
tabindex="-1"
|
|
350
318
|
part="sheet"
|
|
351
319
|
>
|
|
352
|
-
<div class="
|
|
353
|
-
<div class="
|
|
320
|
+
<div class="bottomsheet-handle" part="handle-area">
|
|
321
|
+
<div class="bottomsheet-bar" part="handle"></div>
|
|
354
322
|
</div>
|
|
355
|
-
<div class="
|
|
323
|
+
<div class="bottomsheet-header" part="header">
|
|
356
324
|
<slot name="header"></slot>
|
|
357
325
|
</div>
|
|
358
|
-
<div class="
|
|
326
|
+
<div class="bottomsheet-content" part="content">
|
|
359
327
|
<slot></slot>
|
|
360
328
|
</div>
|
|
361
329
|
</div>
|
|
@@ -364,9 +332,9 @@ class ElDmBottomSheet extends BaseElement {
|
|
|
364
332
|
}
|
|
365
333
|
update() {
|
|
366
334
|
super.update();
|
|
367
|
-
const backdrop = this.shadowRoot?.querySelector(".
|
|
335
|
+
const backdrop = this.shadowRoot?.querySelector(".bottomsheet-backdrop");
|
|
368
336
|
backdrop?.addEventListener("click", this._handleBackdropClick);
|
|
369
|
-
const handleArea = this.shadowRoot?.querySelector(".
|
|
337
|
+
const handleArea = this.shadowRoot?.querySelector(".bottomsheet-handle");
|
|
370
338
|
handleArea?.addEventListener("touchstart", this._handleTouchStart, {
|
|
371
339
|
passive: false
|
|
372
340
|
});
|
|
@@ -388,5 +356,5 @@ function register() {
|
|
|
388
356
|
// src/register.ts
|
|
389
357
|
register();
|
|
390
358
|
|
|
391
|
-
//# debugId=
|
|
359
|
+
//# debugId=074BEE411CFB9CCA64756E2164756E21
|
|
392
360
|
//# sourceMappingURL=register.js.map
|