@duskmoon-dev/el-drawer 0.4.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 +158 -0
- package/dist/cjs/index.js +15 -99
- package/dist/cjs/index.js.map +3 -3
- package/dist/cjs/register.js +15 -99
- package/dist/cjs/register.js.map +3 -3
- package/dist/esm/index.js +13 -97
- package/dist/esm/index.js.map +3 -3
- package/dist/esm/register.js +13 -97
- package/dist/esm/register.js.map +3 -3
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/el-dm-drawer.d.ts +2 -1
- package/dist/types/el-dm-drawer.d.ts.map +1 -1
- package/package.json +6 -5
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
// src/el-dm-drawer.ts
|
|
2
|
-
import { BaseElement, css } from "@duskmoon-dev/el-
|
|
2
|
+
import { BaseElement, css, animationStyles } from "@duskmoon-dev/el-base";
|
|
3
|
+
import { css as drawerCSS } from "@duskmoon-dev/core/components/drawer";
|
|
4
|
+
var coreStyles = drawerCSS.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
|
|
3
5
|
var styles = css`
|
|
4
6
|
:host {
|
|
5
7
|
display: contents;
|
|
@@ -9,6 +11,10 @@ var styles = css`
|
|
|
9
11
|
display: none !important;
|
|
10
12
|
}
|
|
11
13
|
|
|
14
|
+
/* Import core drawer styles */
|
|
15
|
+
${coreStyles}
|
|
16
|
+
|
|
17
|
+
/* Web component specific: wrapper for positioning context */
|
|
12
18
|
.drawer-wrapper {
|
|
13
19
|
position: fixed;
|
|
14
20
|
inset: 0;
|
|
@@ -20,105 +26,14 @@ var styles = css`
|
|
|
20
26
|
pointer-events: auto;
|
|
21
27
|
}
|
|
22
28
|
|
|
23
|
-
|
|
24
|
-
position: absolute;
|
|
25
|
-
inset: 0;
|
|
26
|
-
background-color: rgba(0, 0, 0, 0.5);
|
|
27
|
-
opacity: 0;
|
|
28
|
-
visibility: hidden;
|
|
29
|
-
transition:
|
|
30
|
-
opacity 300ms ease,
|
|
31
|
-
visibility 300ms ease;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.drawer-wrapper.open .drawer-backdrop {
|
|
35
|
-
opacity: 1;
|
|
36
|
-
visibility: visible;
|
|
37
|
-
}
|
|
38
|
-
|
|
29
|
+
/* Override core's fixed positioning — our wrapper handles it */
|
|
39
30
|
.drawer {
|
|
40
31
|
position: absolute;
|
|
41
|
-
top: 0;
|
|
42
|
-
bottom: 0;
|
|
43
|
-
display: flex;
|
|
44
|
-
flex-direction: column;
|
|
45
32
|
width: var(--drawer-width, 280px);
|
|
46
|
-
max-width: 100vw;
|
|
47
|
-
background-color: var(--color-surface);
|
|
48
|
-
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
49
|
-
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
50
33
|
font-family: inherit;
|
|
51
34
|
pointer-events: auto;
|
|
52
35
|
}
|
|
53
36
|
|
|
54
|
-
.drawer-left {
|
|
55
|
-
left: 0;
|
|
56
|
-
border-right: 1px solid var(--color-outline);
|
|
57
|
-
transform: translateX(-100%);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.drawer-right {
|
|
61
|
-
right: 0;
|
|
62
|
-
border-left: 1px solid var(--color-outline);
|
|
63
|
-
transform: translateX(100%);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.drawer-wrapper.open .drawer-left,
|
|
67
|
-
.drawer-wrapper.open .drawer-right {
|
|
68
|
-
transform: translateX(0);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.drawer-header {
|
|
72
|
-
display: flex;
|
|
73
|
-
align-items: center;
|
|
74
|
-
justify-content: space-between;
|
|
75
|
-
padding: 1rem 1.5rem;
|
|
76
|
-
border-bottom: 1px solid var(--color-outline);
|
|
77
|
-
flex-shrink: 0;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.drawer-body {
|
|
81
|
-
flex: 1;
|
|
82
|
-
padding: 1rem 1.5rem;
|
|
83
|
-
overflow-y: auto;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.drawer-footer {
|
|
87
|
-
display: flex;
|
|
88
|
-
align-items: center;
|
|
89
|
-
gap: 0.5rem;
|
|
90
|
-
padding: 1rem 1.5rem;
|
|
91
|
-
border-top: 1px solid var(--color-outline);
|
|
92
|
-
flex-shrink: 0;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.drawer-close {
|
|
96
|
-
display: flex;
|
|
97
|
-
align-items: center;
|
|
98
|
-
justify-content: center;
|
|
99
|
-
width: 2rem;
|
|
100
|
-
height: 2rem;
|
|
101
|
-
border: none;
|
|
102
|
-
background: transparent;
|
|
103
|
-
border-radius: 0.5rem;
|
|
104
|
-
cursor: pointer;
|
|
105
|
-
color: var(--color-on-surface);
|
|
106
|
-
opacity: 0.7;
|
|
107
|
-
transition:
|
|
108
|
-
opacity 150ms ease,
|
|
109
|
-
background-color 150ms ease;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.drawer-close:hover {
|
|
113
|
-
opacity: 1;
|
|
114
|
-
background-color: var(--color-surface-variant);
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.drawer-close:focus {
|
|
118
|
-
outline: 2px solid var(--color-primary);
|
|
119
|
-
outline-offset: 2px;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
37
|
/* Non-modal drawer positioning */
|
|
123
38
|
:host(:not([modal])) .drawer-wrapper {
|
|
124
39
|
pointer-events: none;
|
|
@@ -140,7 +55,7 @@ class ElDmDrawer extends BaseElement {
|
|
|
140
55
|
_previouslyFocused = null;
|
|
141
56
|
constructor() {
|
|
142
57
|
super();
|
|
143
|
-
this.attachStyles(styles);
|
|
58
|
+
this.attachStyles([styles, animationStyles]);
|
|
144
59
|
}
|
|
145
60
|
_handleBackdropClick(event) {
|
|
146
61
|
if (this.modal && event.target === event.currentTarget) {
|
|
@@ -252,12 +167,13 @@ class ElDmDrawer extends BaseElement {
|
|
|
252
167
|
}
|
|
253
168
|
render() {
|
|
254
169
|
const positionClass = this.position === "right" ? "drawer-right" : "drawer-left";
|
|
170
|
+
const openClass = this.open ? "drawer-open" : "";
|
|
255
171
|
const widthStyle = this.width ? `--drawer-width: ${this.width}` : "";
|
|
256
172
|
return `
|
|
257
173
|
<div class="drawer-wrapper ${this.open ? "open" : ""}" part="wrapper">
|
|
258
|
-
${this.modal ?
|
|
174
|
+
${this.modal ? `<div class="drawer-backdrop ${this.open ? "drawer-backdrop-show" : ""}" part="backdrop"></div>` : ""}
|
|
259
175
|
<div
|
|
260
|
-
class="drawer ${positionClass}"
|
|
176
|
+
class="drawer ${positionClass} ${openClass}"
|
|
261
177
|
role="dialog"
|
|
262
178
|
aria-modal="${this.modal ? "true" : "false"}"
|
|
263
179
|
style="${widthStyle}"
|
|
@@ -303,5 +219,5 @@ export {
|
|
|
303
219
|
ElDmDrawer
|
|
304
220
|
};
|
|
305
221
|
|
|
306
|
-
//# debugId=
|
|
222
|
+
//# debugId=D49AD489D7A2EB5E64756E2164756E21
|
|
307
223
|
//# 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-drawer.ts", "../../src/index.ts"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"/**\n * DuskMoon Drawer Element\n *\n * A side navigation drawer/sidebar component for displaying navigation or content panels.\n * Supports left/right positioning, modal mode with backdrop, and smooth slide animations.\n *\n * @element el-dm-drawer\n *\n * @attr {boolean} open - Whether the drawer is open\n * @attr {string} position - Drawer position: 'left' or 'right'\n * @attr {boolean} modal - Whether drawer shows backdrop and traps focus\n * @attr {string} width - Custom width for the drawer (CSS value)\n *\n * @slot - Default slot for drawer content\n * @slot header - Drawer header section\n * @slot footer - Drawer footer section\n *\n * @csspart drawer - The drawer container\n * @csspart backdrop - The backdrop overlay (modal mode)\n * @csspart content - The content wrapper\n * @csspart header - The header section\n * @csspart body - The body section\n * @csspart footer - The footer section\n *\n * @fires open - Fired when drawer opens\n * @fires close - Fired when drawer closes\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\n\nexport type DrawerPosition = 'left' | 'right';\n\nconst styles = css`\n :host {\n display: contents;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n
|
|
5
|
+
"/**\n * DuskMoon Drawer Element\n *\n * A side navigation drawer/sidebar component for displaying navigation or content panels.\n * Supports left/right positioning, modal mode with backdrop, and smooth slide animations.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-drawer\n *\n * @attr {boolean} open - Whether the drawer is open\n * @attr {string} position - Drawer position: 'left' or 'right'\n * @attr {boolean} modal - Whether drawer shows backdrop and traps focus\n * @attr {string} width - Custom width for the drawer (CSS value)\n *\n * @slot - Default slot for drawer content\n * @slot header - Drawer header section\n * @slot footer - Drawer footer section\n *\n * @csspart drawer - The drawer container\n * @csspart backdrop - The backdrop overlay (modal mode)\n * @csspart content - The content wrapper\n * @csspart header - The header section\n * @csspart body - The body section\n * @csspart footer - The footer section\n *\n * @fires open - Fired when drawer opens\n * @fires close - Fired when drawer closes\n */\n\nimport { BaseElement, css, animationStyles } from '@duskmoon-dev/el-base';\nimport { css as drawerCSS } from '@duskmoon-dev/core/components/drawer';\n\nexport type DrawerPosition = 'left' | 'right';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = drawerCSS.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 drawer styles */\n ${coreStyles}\n\n /* Web component specific: wrapper for positioning context */\n .drawer-wrapper {\n position: fixed;\n inset: 0;\n z-index: 1000;\n pointer-events: none;\n }\n\n .drawer-wrapper.open {\n pointer-events: auto;\n }\n\n /* Override core's fixed positioning — our wrapper handles it */\n .drawer {\n position: absolute;\n width: var(--drawer-width, 280px);\n font-family: inherit;\n pointer-events: auto;\n }\n\n /* Non-modal drawer positioning */\n :host(:not([modal])) .drawer-wrapper {\n pointer-events: none;\n }\n\n :host(:not([modal])) .drawer {\n pointer-events: auto;\n }\n`;\n\nexport class ElDmDrawer extends BaseElement {\n static properties = {\n open: { type: Boolean, reflect: true },\n position: { type: String, reflect: true, default: 'left' },\n modal: { type: Boolean, reflect: true },\n width: { type: String, reflect: true },\n };\n\n declare open: boolean;\n declare position: DrawerPosition;\n declare modal: boolean;\n declare width: string;\n\n private _focusableElements: HTMLElement[] = [];\n private _previouslyFocused: HTMLElement | null = null;\n\n constructor() {\n super();\n this.attachStyles([styles, animationStyles]);\n }\n\n private _handleBackdropClick(event: Event): void {\n if (this.modal && event.target === event.currentTarget) {\n this.hide();\n }\n }\n\n private _handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key === 'Escape' && this.modal) {\n this.hide();\n return;\n }\n\n // Focus trap for modal mode\n if (event.key === 'Tab' && this.modal && this.open) {\n this._handleTabKey(event);\n }\n };\n\n private _handleTabKey(event: KeyboardEvent): void {\n const focusable = this._getFocusableElements();\n if (focusable.length === 0) return;\n\n const firstFocusable = focusable[0];\n const lastFocusable = focusable[focusable.length - 1];\n\n if (event.shiftKey) {\n if (document.activeElement === firstFocusable) {\n event.preventDefault();\n lastFocusable.focus();\n }\n } else {\n if (document.activeElement === lastFocusable) {\n event.preventDefault();\n firstFocusable.focus();\n }\n }\n }\n\n private _getFocusableElements(): HTMLElement[] {\n const drawer = this.shadowRoot?.querySelector('.drawer');\n if (!drawer) return [];\n\n const focusableSelectors = [\n 'button:not([disabled])',\n 'a[href]',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n ].join(', ');\n\n // Get focusable elements from shadow DOM\n const shadowFocusable = Array.from(\n drawer.querySelectorAll(focusableSelectors),\n ) as HTMLElement[];\n\n // Get focusable elements from slotted content\n const slots = drawer.querySelectorAll('slot');\n const slottedFocusable: HTMLElement[] = [];\n\n slots.forEach((slot) => {\n const assignedElements = slot.assignedElements({ flatten: true });\n assignedElements.forEach((el) => {\n if (el instanceof HTMLElement) {\n if (el.matches(focusableSelectors)) {\n slottedFocusable.push(el);\n }\n slottedFocusable.push(\n ...(Array.from(el.querySelectorAll(focusableSelectors)) as HTMLElement[]),\n );\n }\n });\n });\n\n return [...shadowFocusable, ...slottedFocusable];\n }\n\n private _trapFocus(): void {\n this._previouslyFocused = document.activeElement as HTMLElement;\n this._focusableElements = this._getFocusableElements();\n\n // Focus first focusable element or the drawer itself\n requestAnimationFrame(() => {\n if (this._focusableElements.length > 0) {\n this._focusableElements[0].focus();\n } else {\n const drawer = this.shadowRoot?.querySelector('.drawer') as HTMLElement;\n drawer?.focus();\n }\n });\n }\n\n private _releaseFocus(): void {\n if (this._previouslyFocused && this._previouslyFocused.focus) {\n this._previouslyFocused.focus();\n }\n this._previouslyFocused = null;\n }\n\n show(): void {\n this.open = true;\n document.addEventListener('keydown', this._handleKeyDown);\n\n if (this.modal) {\n document.body.style.overflow = 'hidden';\n this._trapFocus();\n }\n\n this.emit('open');\n }\n\n hide(): void {\n this.open = false;\n document.removeEventListener('keydown', this._handleKeyDown);\n\n if (this.modal) {\n document.body.style.overflow = '';\n this._releaseFocus();\n }\n\n this.emit('close');\n }\n\n toggle(): void {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n document.removeEventListener('keydown', this._handleKeyDown);\n document.body.style.overflow = '';\n }\n\n render(): string {\n const positionClass = this.position === 'right' ? 'drawer-right' : 'drawer-left';\n const openClass = this.open ? 'drawer-open' : '';\n const widthStyle = this.width ? `--drawer-width: ${this.width}` : '';\n\n return `\n <div class=\"drawer-wrapper ${this.open ? 'open' : ''}\" part=\"wrapper\">\n ${this.modal ? `<div class=\"drawer-backdrop ${this.open ? 'drawer-backdrop-show' : ''}\" part=\"backdrop\"></div>` : ''}\n <div\n class=\"drawer ${positionClass} ${openClass}\"\n role=\"dialog\"\n aria-modal=\"${this.modal ? 'true' : 'false'}\"\n style=\"${widthStyle}\"\n tabindex=\"-1\"\n part=\"drawer\"\n >\n <div class=\"drawer-header\" part=\"header\">\n <slot name=\"header\"></slot>\n <button class=\"drawer-close\" part=\"close\" aria-label=\"Close drawer\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n <div class=\"drawer-body\" part=\"body\">\n <slot></slot>\n </div>\n <div class=\"drawer-footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n\n update(): void {\n super.update();\n\n const backdrop = this.shadowRoot?.querySelector('.drawer-backdrop');\n backdrop?.addEventListener('click', this._handleBackdropClick.bind(this));\n\n const closeBtn = this.shadowRoot?.querySelector('.drawer-close');\n closeBtn?.addEventListener('click', () => this.hide());\n }\n}\n",
|
|
6
6
|
"import { ElDmDrawer } from './el-dm-drawer.js';\n\nexport { ElDmDrawer };\nexport type { DrawerPosition } from './el-dm-drawer.js';\n\nexport function register(): void {\n if (!customElements.get('el-dm-drawer')) {\n customElements.define('el-dm-drawer', ElDmDrawer);\n }\n}\n"
|
|
7
7
|
],
|
|
8
|
-
"mappings": ";
|
|
9
|
-
"debugId": "
|
|
8
|
+
"mappings": "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",
|
|
9
|
+
"debugId": "D49AD489D7A2EB5E64756E2164756E21",
|
|
10
10
|
"names": []
|
|
11
11
|
}
|
package/dist/esm/register.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
// src/el-dm-drawer.ts
|
|
2
|
-
import { BaseElement, css } from "@duskmoon-dev/el-
|
|
2
|
+
import { BaseElement, css, animationStyles } from "@duskmoon-dev/el-base";
|
|
3
|
+
import { css as drawerCSS } from "@duskmoon-dev/core/components/drawer";
|
|
4
|
+
var coreStyles = drawerCSS.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
|
|
3
5
|
var styles = css`
|
|
4
6
|
:host {
|
|
5
7
|
display: contents;
|
|
@@ -9,6 +11,10 @@ var styles = css`
|
|
|
9
11
|
display: none !important;
|
|
10
12
|
}
|
|
11
13
|
|
|
14
|
+
/* Import core drawer styles */
|
|
15
|
+
${coreStyles}
|
|
16
|
+
|
|
17
|
+
/* Web component specific: wrapper for positioning context */
|
|
12
18
|
.drawer-wrapper {
|
|
13
19
|
position: fixed;
|
|
14
20
|
inset: 0;
|
|
@@ -20,105 +26,14 @@ var styles = css`
|
|
|
20
26
|
pointer-events: auto;
|
|
21
27
|
}
|
|
22
28
|
|
|
23
|
-
|
|
24
|
-
position: absolute;
|
|
25
|
-
inset: 0;
|
|
26
|
-
background-color: rgba(0, 0, 0, 0.5);
|
|
27
|
-
opacity: 0;
|
|
28
|
-
visibility: hidden;
|
|
29
|
-
transition:
|
|
30
|
-
opacity 300ms ease,
|
|
31
|
-
visibility 300ms ease;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.drawer-wrapper.open .drawer-backdrop {
|
|
35
|
-
opacity: 1;
|
|
36
|
-
visibility: visible;
|
|
37
|
-
}
|
|
38
|
-
|
|
29
|
+
/* Override core's fixed positioning — our wrapper handles it */
|
|
39
30
|
.drawer {
|
|
40
31
|
position: absolute;
|
|
41
|
-
top: 0;
|
|
42
|
-
bottom: 0;
|
|
43
|
-
display: flex;
|
|
44
|
-
flex-direction: column;
|
|
45
32
|
width: var(--drawer-width, 280px);
|
|
46
|
-
max-width: 100vw;
|
|
47
|
-
background-color: var(--color-surface);
|
|
48
|
-
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
49
|
-
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
50
33
|
font-family: inherit;
|
|
51
34
|
pointer-events: auto;
|
|
52
35
|
}
|
|
53
36
|
|
|
54
|
-
.drawer-left {
|
|
55
|
-
left: 0;
|
|
56
|
-
border-right: 1px solid var(--color-outline);
|
|
57
|
-
transform: translateX(-100%);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.drawer-right {
|
|
61
|
-
right: 0;
|
|
62
|
-
border-left: 1px solid var(--color-outline);
|
|
63
|
-
transform: translateX(100%);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.drawer-wrapper.open .drawer-left,
|
|
67
|
-
.drawer-wrapper.open .drawer-right {
|
|
68
|
-
transform: translateX(0);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.drawer-header {
|
|
72
|
-
display: flex;
|
|
73
|
-
align-items: center;
|
|
74
|
-
justify-content: space-between;
|
|
75
|
-
padding: 1rem 1.5rem;
|
|
76
|
-
border-bottom: 1px solid var(--color-outline);
|
|
77
|
-
flex-shrink: 0;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.drawer-body {
|
|
81
|
-
flex: 1;
|
|
82
|
-
padding: 1rem 1.5rem;
|
|
83
|
-
overflow-y: auto;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.drawer-footer {
|
|
87
|
-
display: flex;
|
|
88
|
-
align-items: center;
|
|
89
|
-
gap: 0.5rem;
|
|
90
|
-
padding: 1rem 1.5rem;
|
|
91
|
-
border-top: 1px solid var(--color-outline);
|
|
92
|
-
flex-shrink: 0;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.drawer-close {
|
|
96
|
-
display: flex;
|
|
97
|
-
align-items: center;
|
|
98
|
-
justify-content: center;
|
|
99
|
-
width: 2rem;
|
|
100
|
-
height: 2rem;
|
|
101
|
-
border: none;
|
|
102
|
-
background: transparent;
|
|
103
|
-
border-radius: 0.5rem;
|
|
104
|
-
cursor: pointer;
|
|
105
|
-
color: var(--color-on-surface);
|
|
106
|
-
opacity: 0.7;
|
|
107
|
-
transition:
|
|
108
|
-
opacity 150ms ease,
|
|
109
|
-
background-color 150ms ease;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.drawer-close:hover {
|
|
113
|
-
opacity: 1;
|
|
114
|
-
background-color: var(--color-surface-variant);
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.drawer-close:focus {
|
|
118
|
-
outline: 2px solid var(--color-primary);
|
|
119
|
-
outline-offset: 2px;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
37
|
/* Non-modal drawer positioning */
|
|
123
38
|
:host(:not([modal])) .drawer-wrapper {
|
|
124
39
|
pointer-events: none;
|
|
@@ -140,7 +55,7 @@ class ElDmDrawer extends BaseElement {
|
|
|
140
55
|
_previouslyFocused = null;
|
|
141
56
|
constructor() {
|
|
142
57
|
super();
|
|
143
|
-
this.attachStyles(styles);
|
|
58
|
+
this.attachStyles([styles, animationStyles]);
|
|
144
59
|
}
|
|
145
60
|
_handleBackdropClick(event) {
|
|
146
61
|
if (this.modal && event.target === event.currentTarget) {
|
|
@@ -252,12 +167,13 @@ class ElDmDrawer extends BaseElement {
|
|
|
252
167
|
}
|
|
253
168
|
render() {
|
|
254
169
|
const positionClass = this.position === "right" ? "drawer-right" : "drawer-left";
|
|
170
|
+
const openClass = this.open ? "drawer-open" : "";
|
|
255
171
|
const widthStyle = this.width ? `--drawer-width: ${this.width}` : "";
|
|
256
172
|
return `
|
|
257
173
|
<div class="drawer-wrapper ${this.open ? "open" : ""}" part="wrapper">
|
|
258
|
-
${this.modal ?
|
|
174
|
+
${this.modal ? `<div class="drawer-backdrop ${this.open ? "drawer-backdrop-show" : ""}" part="backdrop"></div>` : ""}
|
|
259
175
|
<div
|
|
260
|
-
class="drawer ${positionClass}"
|
|
176
|
+
class="drawer ${positionClass} ${openClass}"
|
|
261
177
|
role="dialog"
|
|
262
178
|
aria-modal="${this.modal ? "true" : "false"}"
|
|
263
179
|
style="${widthStyle}"
|
|
@@ -302,5 +218,5 @@ function register() {
|
|
|
302
218
|
// src/register.ts
|
|
303
219
|
register();
|
|
304
220
|
|
|
305
|
-
//# debugId=
|
|
221
|
+
//# debugId=34BD20A530E029F264756E2164756E21
|
|
306
222
|
//# sourceMappingURL=register.js.map
|
package/dist/esm/register.js.map
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/el-dm-drawer.ts", "../../src/index.ts", "../../src/register.ts"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"/**\n * DuskMoon Drawer Element\n *\n * A side navigation drawer/sidebar component for displaying navigation or content panels.\n * Supports left/right positioning, modal mode with backdrop, and smooth slide animations.\n *\n * @element el-dm-drawer\n *\n * @attr {boolean} open - Whether the drawer is open\n * @attr {string} position - Drawer position: 'left' or 'right'\n * @attr {boolean} modal - Whether drawer shows backdrop and traps focus\n * @attr {string} width - Custom width for the drawer (CSS value)\n *\n * @slot - Default slot for drawer content\n * @slot header - Drawer header section\n * @slot footer - Drawer footer section\n *\n * @csspart drawer - The drawer container\n * @csspart backdrop - The backdrop overlay (modal mode)\n * @csspart content - The content wrapper\n * @csspart header - The header section\n * @csspart body - The body section\n * @csspart footer - The footer section\n *\n * @fires open - Fired when drawer opens\n * @fires close - Fired when drawer closes\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\n\nexport type DrawerPosition = 'left' | 'right';\n\nconst styles = css`\n :host {\n display: contents;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n
|
|
5
|
+
"/**\n * DuskMoon Drawer Element\n *\n * A side navigation drawer/sidebar component for displaying navigation or content panels.\n * Supports left/right positioning, modal mode with backdrop, and smooth slide animations.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-drawer\n *\n * @attr {boolean} open - Whether the drawer is open\n * @attr {string} position - Drawer position: 'left' or 'right'\n * @attr {boolean} modal - Whether drawer shows backdrop and traps focus\n * @attr {string} width - Custom width for the drawer (CSS value)\n *\n * @slot - Default slot for drawer content\n * @slot header - Drawer header section\n * @slot footer - Drawer footer section\n *\n * @csspart drawer - The drawer container\n * @csspart backdrop - The backdrop overlay (modal mode)\n * @csspart content - The content wrapper\n * @csspart header - The header section\n * @csspart body - The body section\n * @csspart footer - The footer section\n *\n * @fires open - Fired when drawer opens\n * @fires close - Fired when drawer closes\n */\n\nimport { BaseElement, css, animationStyles } from '@duskmoon-dev/el-base';\nimport { css as drawerCSS } from '@duskmoon-dev/core/components/drawer';\n\nexport type DrawerPosition = 'left' | 'right';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = drawerCSS.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 drawer styles */\n ${coreStyles}\n\n /* Web component specific: wrapper for positioning context */\n .drawer-wrapper {\n position: fixed;\n inset: 0;\n z-index: 1000;\n pointer-events: none;\n }\n\n .drawer-wrapper.open {\n pointer-events: auto;\n }\n\n /* Override core's fixed positioning — our wrapper handles it */\n .drawer {\n position: absolute;\n width: var(--drawer-width, 280px);\n font-family: inherit;\n pointer-events: auto;\n }\n\n /* Non-modal drawer positioning */\n :host(:not([modal])) .drawer-wrapper {\n pointer-events: none;\n }\n\n :host(:not([modal])) .drawer {\n pointer-events: auto;\n }\n`;\n\nexport class ElDmDrawer extends BaseElement {\n static properties = {\n open: { type: Boolean, reflect: true },\n position: { type: String, reflect: true, default: 'left' },\n modal: { type: Boolean, reflect: true },\n width: { type: String, reflect: true },\n };\n\n declare open: boolean;\n declare position: DrawerPosition;\n declare modal: boolean;\n declare width: string;\n\n private _focusableElements: HTMLElement[] = [];\n private _previouslyFocused: HTMLElement | null = null;\n\n constructor() {\n super();\n this.attachStyles([styles, animationStyles]);\n }\n\n private _handleBackdropClick(event: Event): void {\n if (this.modal && event.target === event.currentTarget) {\n this.hide();\n }\n }\n\n private _handleKeyDown = (event: KeyboardEvent): void => {\n if (event.key === 'Escape' && this.modal) {\n this.hide();\n return;\n }\n\n // Focus trap for modal mode\n if (event.key === 'Tab' && this.modal && this.open) {\n this._handleTabKey(event);\n }\n };\n\n private _handleTabKey(event: KeyboardEvent): void {\n const focusable = this._getFocusableElements();\n if (focusable.length === 0) return;\n\n const firstFocusable = focusable[0];\n const lastFocusable = focusable[focusable.length - 1];\n\n if (event.shiftKey) {\n if (document.activeElement === firstFocusable) {\n event.preventDefault();\n lastFocusable.focus();\n }\n } else {\n if (document.activeElement === lastFocusable) {\n event.preventDefault();\n firstFocusable.focus();\n }\n }\n }\n\n private _getFocusableElements(): HTMLElement[] {\n const drawer = this.shadowRoot?.querySelector('.drawer');\n if (!drawer) return [];\n\n const focusableSelectors = [\n 'button:not([disabled])',\n 'a[href]',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n ].join(', ');\n\n // Get focusable elements from shadow DOM\n const shadowFocusable = Array.from(\n drawer.querySelectorAll(focusableSelectors),\n ) as HTMLElement[];\n\n // Get focusable elements from slotted content\n const slots = drawer.querySelectorAll('slot');\n const slottedFocusable: HTMLElement[] = [];\n\n slots.forEach((slot) => {\n const assignedElements = slot.assignedElements({ flatten: true });\n assignedElements.forEach((el) => {\n if (el instanceof HTMLElement) {\n if (el.matches(focusableSelectors)) {\n slottedFocusable.push(el);\n }\n slottedFocusable.push(\n ...(Array.from(el.querySelectorAll(focusableSelectors)) as HTMLElement[]),\n );\n }\n });\n });\n\n return [...shadowFocusable, ...slottedFocusable];\n }\n\n private _trapFocus(): void {\n this._previouslyFocused = document.activeElement as HTMLElement;\n this._focusableElements = this._getFocusableElements();\n\n // Focus first focusable element or the drawer itself\n requestAnimationFrame(() => {\n if (this._focusableElements.length > 0) {\n this._focusableElements[0].focus();\n } else {\n const drawer = this.shadowRoot?.querySelector('.drawer') as HTMLElement;\n drawer?.focus();\n }\n });\n }\n\n private _releaseFocus(): void {\n if (this._previouslyFocused && this._previouslyFocused.focus) {\n this._previouslyFocused.focus();\n }\n this._previouslyFocused = null;\n }\n\n show(): void {\n this.open = true;\n document.addEventListener('keydown', this._handleKeyDown);\n\n if (this.modal) {\n document.body.style.overflow = 'hidden';\n this._trapFocus();\n }\n\n this.emit('open');\n }\n\n hide(): void {\n this.open = false;\n document.removeEventListener('keydown', this._handleKeyDown);\n\n if (this.modal) {\n document.body.style.overflow = '';\n this._releaseFocus();\n }\n\n this.emit('close');\n }\n\n toggle(): void {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n document.removeEventListener('keydown', this._handleKeyDown);\n document.body.style.overflow = '';\n }\n\n render(): string {\n const positionClass = this.position === 'right' ? 'drawer-right' : 'drawer-left';\n const openClass = this.open ? 'drawer-open' : '';\n const widthStyle = this.width ? `--drawer-width: ${this.width}` : '';\n\n return `\n <div class=\"drawer-wrapper ${this.open ? 'open' : ''}\" part=\"wrapper\">\n ${this.modal ? `<div class=\"drawer-backdrop ${this.open ? 'drawer-backdrop-show' : ''}\" part=\"backdrop\"></div>` : ''}\n <div\n class=\"drawer ${positionClass} ${openClass}\"\n role=\"dialog\"\n aria-modal=\"${this.modal ? 'true' : 'false'}\"\n style=\"${widthStyle}\"\n tabindex=\"-1\"\n part=\"drawer\"\n >\n <div class=\"drawer-header\" part=\"header\">\n <slot name=\"header\"></slot>\n <button class=\"drawer-close\" part=\"close\" aria-label=\"Close drawer\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n <div class=\"drawer-body\" part=\"body\">\n <slot></slot>\n </div>\n <div class=\"drawer-footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n\n update(): void {\n super.update();\n\n const backdrop = this.shadowRoot?.querySelector('.drawer-backdrop');\n backdrop?.addEventListener('click', this._handleBackdropClick.bind(this));\n\n const closeBtn = this.shadowRoot?.querySelector('.drawer-close');\n closeBtn?.addEventListener('click', () => this.hide());\n }\n}\n",
|
|
6
6
|
"import { ElDmDrawer } from './el-dm-drawer.js';\n\nexport { ElDmDrawer };\nexport type { DrawerPosition } from './el-dm-drawer.js';\n\nexport function register(): void {\n if (!customElements.get('el-dm-drawer')) {\n customElements.define('el-dm-drawer', ElDmDrawer);\n }\n}\n",
|
|
7
7
|
"import { register } from './index.js';\nregister();\n"
|
|
8
8
|
],
|
|
9
|
-
"mappings": ";
|
|
10
|
-
"debugId": "
|
|
9
|
+
"mappings": "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",
|
|
10
|
+
"debugId": "34BD20A530E029F264756E2164756E21",
|
|
11
11
|
"names": []
|
|
12
12
|
}
|