@duskmoon-dev/el-navbar 0.4.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/cjs/index.js +356 -0
- package/dist/cjs/index.js.map +11 -0
- package/dist/cjs/register.js +359 -0
- package/dist/cjs/register.js.map +12 -0
- package/dist/esm/index.js +324 -0
- package/dist/esm/index.js.map +11 -0
- package/dist/esm/register.js +323 -0
- package/dist/esm/register.js.map +12 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/dist/types/el-dm-navbar.d.ts +80 -0
- package/dist/types/el-dm-navbar.d.ts.map +1 -0
- package/dist/types/index.d.ts +19 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/register.d.ts +2 -0
- package/dist/types/register.d.ts.map +1 -0
- package/package.json +58 -0
|
@@ -0,0 +1,356 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __moduleCache = /* @__PURE__ */ new WeakMap;
|
|
6
|
+
var __toCommonJS = (from) => {
|
|
7
|
+
var entry = __moduleCache.get(from), desc;
|
|
8
|
+
if (entry)
|
|
9
|
+
return entry;
|
|
10
|
+
entry = __defProp({}, "__esModule", { value: true });
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function")
|
|
12
|
+
__getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
|
|
13
|
+
get: () => from[key],
|
|
14
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
15
|
+
}));
|
|
16
|
+
__moduleCache.set(from, entry);
|
|
17
|
+
return entry;
|
|
18
|
+
};
|
|
19
|
+
var __export = (target, all) => {
|
|
20
|
+
for (var name in all)
|
|
21
|
+
__defProp(target, name, {
|
|
22
|
+
get: all[name],
|
|
23
|
+
enumerable: true,
|
|
24
|
+
configurable: true,
|
|
25
|
+
set: (newValue) => all[name] = () => newValue
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
// src/index.ts
|
|
30
|
+
var exports_src = {};
|
|
31
|
+
__export(exports_src, {
|
|
32
|
+
register: () => register,
|
|
33
|
+
ElDmNavbar: () => ElDmNavbar
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(exports_src);
|
|
36
|
+
|
|
37
|
+
// src/el-dm-navbar.ts
|
|
38
|
+
var import_el_core = require("@duskmoon-dev/el-core");
|
|
39
|
+
var styles = import_el_core.css`
|
|
40
|
+
:host {
|
|
41
|
+
display: block;
|
|
42
|
+
width: 100%;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
:host([hidden]) {
|
|
46
|
+
display: none !important;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
:host([fixed]) {
|
|
50
|
+
position: fixed;
|
|
51
|
+
top: 0;
|
|
52
|
+
left: 0;
|
|
53
|
+
right: 0;
|
|
54
|
+
z-index: 100;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.navbar {
|
|
58
|
+
display: flex;
|
|
59
|
+
align-items: center;
|
|
60
|
+
justify-content: space-between;
|
|
61
|
+
min-height: 4rem;
|
|
62
|
+
padding: 0 1.5rem;
|
|
63
|
+
background-color: var(--color-surface);
|
|
64
|
+
color: var(--color-on-surface);
|
|
65
|
+
font-family: inherit;
|
|
66
|
+
transition:
|
|
67
|
+
background-color 200ms ease,
|
|
68
|
+
box-shadow 200ms ease;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* Color variants */
|
|
72
|
+
.navbar-primary {
|
|
73
|
+
background-color: var(--color-primary);
|
|
74
|
+
color: var(--color-on-primary);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.navbar-secondary {
|
|
78
|
+
background-color: var(--color-secondary);
|
|
79
|
+
color: var(--color-on-secondary);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.navbar-tertiary {
|
|
83
|
+
background-color: var(--color-tertiary);
|
|
84
|
+
color: var(--color-on-tertiary);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Elevated state */
|
|
88
|
+
.navbar-elevated {
|
|
89
|
+
box-shadow:
|
|
90
|
+
0 4px 6px -1px rgb(0 0 0 / 0.1),
|
|
91
|
+
0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.navbar-content {
|
|
95
|
+
display: flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
justify-content: space-between;
|
|
98
|
+
width: 100%;
|
|
99
|
+
max-width: 1400px;
|
|
100
|
+
margin: 0 auto;
|
|
101
|
+
gap: 1rem;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.navbar-start {
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
flex-shrink: 0;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.navbar-center {
|
|
111
|
+
display: flex;
|
|
112
|
+
align-items: center;
|
|
113
|
+
gap: 0.5rem;
|
|
114
|
+
flex: 1;
|
|
115
|
+
justify-content: center;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.navbar-end {
|
|
119
|
+
display: flex;
|
|
120
|
+
align-items: center;
|
|
121
|
+
gap: 0.5rem;
|
|
122
|
+
flex-shrink: 0;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* Hamburger button */
|
|
126
|
+
.navbar-hamburger {
|
|
127
|
+
display: none;
|
|
128
|
+
flex-direction: column;
|
|
129
|
+
justify-content: center;
|
|
130
|
+
align-items: center;
|
|
131
|
+
width: 2.5rem;
|
|
132
|
+
height: 2.5rem;
|
|
133
|
+
padding: 0;
|
|
134
|
+
border: none;
|
|
135
|
+
background: transparent;
|
|
136
|
+
cursor: pointer;
|
|
137
|
+
border-radius: 0.5rem;
|
|
138
|
+
transition: background-color 150ms ease;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.navbar-hamburger:hover {
|
|
142
|
+
background-color: var(--color-surface-variant, rgba(0, 0, 0, 0.1));
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.navbar-hamburger:focus-visible {
|
|
146
|
+
outline: 2px solid var(--color-primary);
|
|
147
|
+
outline-offset: 2px;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.hamburger-line {
|
|
151
|
+
display: block;
|
|
152
|
+
width: 1.25rem;
|
|
153
|
+
height: 2px;
|
|
154
|
+
background-color: currentColor;
|
|
155
|
+
border-radius: 1px;
|
|
156
|
+
transition:
|
|
157
|
+
transform 200ms ease,
|
|
158
|
+
opacity 200ms ease;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.hamburger-line + .hamburger-line {
|
|
162
|
+
margin-top: 4px;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* Hamburger animation when open */
|
|
166
|
+
.navbar-hamburger.open .hamburger-line:nth-child(1) {
|
|
167
|
+
transform: translateY(6px) rotate(45deg);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.navbar-hamburger.open .hamburger-line:nth-child(2) {
|
|
171
|
+
opacity: 0;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.navbar-hamburger.open .hamburger-line:nth-child(3) {
|
|
175
|
+
transform: translateY(-6px) rotate(-45deg);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/* Mobile menu */
|
|
179
|
+
.navbar-mobile-menu {
|
|
180
|
+
display: none;
|
|
181
|
+
position: absolute;
|
|
182
|
+
top: 100%;
|
|
183
|
+
left: 0;
|
|
184
|
+
right: 0;
|
|
185
|
+
background-color: inherit;
|
|
186
|
+
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
187
|
+
padding: 1rem;
|
|
188
|
+
flex-direction: column;
|
|
189
|
+
gap: 0.5rem;
|
|
190
|
+
opacity: 0;
|
|
191
|
+
transform: translateY(-0.5rem);
|
|
192
|
+
transition:
|
|
193
|
+
opacity 200ms ease,
|
|
194
|
+
transform 200ms ease;
|
|
195
|
+
pointer-events: none;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.navbar-mobile-menu.open {
|
|
199
|
+
opacity: 1;
|
|
200
|
+
transform: translateY(0);
|
|
201
|
+
pointer-events: auto;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
/* Slotted content styling */
|
|
205
|
+
::slotted(*) {
|
|
206
|
+
display: flex;
|
|
207
|
+
align-items: center;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
::slotted(a) {
|
|
211
|
+
text-decoration: none;
|
|
212
|
+
color: inherit;
|
|
213
|
+
padding: 0.5rem 1rem;
|
|
214
|
+
border-radius: 0.5rem;
|
|
215
|
+
transition: background-color 150ms ease;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
::slotted(a:hover) {
|
|
219
|
+
background-color: var(--color-surface-variant, rgba(0, 0, 0, 0.1));
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
/* Responsive styles */
|
|
223
|
+
@media (max-width: 768px) {
|
|
224
|
+
.navbar-hamburger {
|
|
225
|
+
display: flex;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.navbar-center {
|
|
229
|
+
display: none;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.navbar-mobile-menu {
|
|
233
|
+
display: flex;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
`;
|
|
237
|
+
|
|
238
|
+
class ElDmNavbar extends import_el_core.BaseElement {
|
|
239
|
+
static properties = {
|
|
240
|
+
fixed: { type: Boolean, reflect: true },
|
|
241
|
+
elevated: { type: Boolean, reflect: true },
|
|
242
|
+
color: { type: String, reflect: true }
|
|
243
|
+
};
|
|
244
|
+
_mobileMenuOpen = false;
|
|
245
|
+
_scrollHandler = null;
|
|
246
|
+
constructor() {
|
|
247
|
+
super();
|
|
248
|
+
this.attachStyles(styles);
|
|
249
|
+
}
|
|
250
|
+
connectedCallback() {
|
|
251
|
+
super.connectedCallback();
|
|
252
|
+
if (this.fixed) {
|
|
253
|
+
this._scrollHandler = this._handleScroll.bind(this);
|
|
254
|
+
window.addEventListener("scroll", this._scrollHandler, { passive: true });
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
disconnectedCallback() {
|
|
258
|
+
super.disconnectedCallback?.();
|
|
259
|
+
if (this._scrollHandler) {
|
|
260
|
+
window.removeEventListener("scroll", this._scrollHandler);
|
|
261
|
+
this._scrollHandler = null;
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
_handleScroll() {
|
|
265
|
+
if (!this.fixed)
|
|
266
|
+
return;
|
|
267
|
+
const shouldElevate = window.scrollY > 0;
|
|
268
|
+
if (shouldElevate !== this.elevated) {
|
|
269
|
+
this.elevated = shouldElevate;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
_toggleMobileMenu() {
|
|
273
|
+
this._mobileMenuOpen = !this._mobileMenuOpen;
|
|
274
|
+
this.emit("menu-toggle", { open: this._mobileMenuOpen });
|
|
275
|
+
this.update();
|
|
276
|
+
}
|
|
277
|
+
closeMobileMenu() {
|
|
278
|
+
if (this._mobileMenuOpen) {
|
|
279
|
+
this._mobileMenuOpen = false;
|
|
280
|
+
this.emit("menu-toggle", { open: false });
|
|
281
|
+
this.update();
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
openMobileMenu() {
|
|
285
|
+
if (!this._mobileMenuOpen) {
|
|
286
|
+
this._mobileMenuOpen = true;
|
|
287
|
+
this.emit("menu-toggle", { open: true });
|
|
288
|
+
this.update();
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
_getNavbarClasses() {
|
|
292
|
+
const classes = ["navbar"];
|
|
293
|
+
if (this.color && this.color !== "surface") {
|
|
294
|
+
classes.push(`navbar-${this.color}`);
|
|
295
|
+
}
|
|
296
|
+
if (this.elevated) {
|
|
297
|
+
classes.push("navbar-elevated");
|
|
298
|
+
}
|
|
299
|
+
return classes.join(" ");
|
|
300
|
+
}
|
|
301
|
+
render() {
|
|
302
|
+
const navbarClasses = this._getNavbarClasses();
|
|
303
|
+
const hamburgerClasses = this._mobileMenuOpen ? "navbar-hamburger open" : "navbar-hamburger";
|
|
304
|
+
const mobileMenuClasses = this._mobileMenuOpen ? "navbar-mobile-menu open" : "navbar-mobile-menu";
|
|
305
|
+
return `
|
|
306
|
+
<nav class="${navbarClasses}" part="navbar" role="navigation">
|
|
307
|
+
<div class="navbar-content" part="content">
|
|
308
|
+
<div class="navbar-start" part="start">
|
|
309
|
+
<slot name="start"></slot>
|
|
310
|
+
</div>
|
|
311
|
+
<div class="navbar-center" part="center">
|
|
312
|
+
<slot></slot>
|
|
313
|
+
</div>
|
|
314
|
+
<div class="navbar-end" part="end">
|
|
315
|
+
<slot name="end"></slot>
|
|
316
|
+
<button
|
|
317
|
+
class="${hamburgerClasses}"
|
|
318
|
+
part="hamburger"
|
|
319
|
+
type="button"
|
|
320
|
+
aria-label="${this._mobileMenuOpen ? "Close menu" : "Open menu"}"
|
|
321
|
+
aria-expanded="${this._mobileMenuOpen ? "true" : "false"}"
|
|
322
|
+
aria-controls="mobile-menu"
|
|
323
|
+
>
|
|
324
|
+
<span class="hamburger-line"></span>
|
|
325
|
+
<span class="hamburger-line"></span>
|
|
326
|
+
<span class="hamburger-line"></span>
|
|
327
|
+
</button>
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
<div
|
|
331
|
+
id="mobile-menu"
|
|
332
|
+
class="${mobileMenuClasses}"
|
|
333
|
+
part="mobile-menu"
|
|
334
|
+
aria-hidden="${this._mobileMenuOpen ? "false" : "true"}"
|
|
335
|
+
>
|
|
336
|
+
<slot name="mobile"></slot>
|
|
337
|
+
</div>
|
|
338
|
+
</nav>
|
|
339
|
+
`;
|
|
340
|
+
}
|
|
341
|
+
update() {
|
|
342
|
+
super.update();
|
|
343
|
+
const hamburger = this.shadowRoot?.querySelector(".navbar-hamburger");
|
|
344
|
+
hamburger?.addEventListener("click", this._toggleMobileMenu.bind(this));
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
// src/index.ts
|
|
349
|
+
function register() {
|
|
350
|
+
if (!customElements.get("el-dm-navbar")) {
|
|
351
|
+
customElements.define("el-dm-navbar", ElDmNavbar);
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
//# debugId=C8090F6B0B6033FD64756E2164756E21
|
|
356
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/el-dm-navbar.ts", "../../src/index.ts"],
|
|
4
|
+
"sourcesContent": [
|
|
5
|
+
"/**\n * DuskMoon Navbar Element\n *\n * A primary navigation bar/header component with responsive design.\n * Uses custom styles with theme variables for consistent theming.\n *\n * @element el-dm-navbar\n *\n * @attr {boolean} fixed - Whether the navbar is fixed to the top\n * @attr {boolean} elevated - Whether the navbar has a shadow elevation\n * @attr {string} color - Navbar color: surface, primary, secondary, tertiary\n *\n * @slot start - Logo or brand content (left side)\n * @slot - Default slot for navigation items (center)\n * @slot end - Actions or icons (right side)\n *\n * @csspart navbar - The navbar container\n * @csspart content - The content wrapper\n * @csspart start - The start slot wrapper\n * @csspart center - The center/default slot wrapper\n * @csspart end - The end slot wrapper\n * @csspart hamburger - The mobile hamburger button\n * @csspart mobile-menu - The mobile menu container\n *\n * @fires menu-toggle - Fired when the mobile menu is toggled\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\n\nexport type NavbarColor = 'surface' | 'primary' | 'secondary' | 'tertiary';\n\nconst styles = css`\n :host {\n display: block;\n width: 100%;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n :host([fixed]) {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 100;\n }\n\n .navbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: 4rem;\n padding: 0 1.5rem;\n background-color: var(--color-surface);\n color: var(--color-on-surface);\n font-family: inherit;\n transition:\n background-color 200ms ease,\n box-shadow 200ms ease;\n }\n\n /* Color variants */\n .navbar-primary {\n background-color: var(--color-primary);\n color: var(--color-on-primary);\n }\n\n .navbar-secondary {\n background-color: var(--color-secondary);\n color: var(--color-on-secondary);\n }\n\n .navbar-tertiary {\n background-color: var(--color-tertiary);\n color: var(--color-on-tertiary);\n }\n\n /* Elevated state */\n .navbar-elevated {\n box-shadow:\n 0 4px 6px -1px rgb(0 0 0 / 0.1),\n 0 2px 4px -2px rgb(0 0 0 / 0.1);\n }\n\n .navbar-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n max-width: 1400px;\n margin: 0 auto;\n gap: 1rem;\n }\n\n .navbar-start {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .navbar-center {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n flex: 1;\n justify-content: center;\n }\n\n .navbar-end {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n flex-shrink: 0;\n }\n\n /* Hamburger button */\n .navbar-hamburger {\n display: none;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 2.5rem;\n height: 2.5rem;\n padding: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n border-radius: 0.5rem;\n transition: background-color 150ms ease;\n }\n\n .navbar-hamburger:hover {\n background-color: var(--color-surface-variant, rgba(0, 0, 0, 0.1));\n }\n\n .navbar-hamburger:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n }\n\n .hamburger-line {\n display: block;\n width: 1.25rem;\n height: 2px;\n background-color: currentColor;\n border-radius: 1px;\n transition:\n transform 200ms ease,\n opacity 200ms ease;\n }\n\n .hamburger-line + .hamburger-line {\n margin-top: 4px;\n }\n\n /* Hamburger animation when open */\n .navbar-hamburger.open .hamburger-line:nth-child(1) {\n transform: translateY(6px) rotate(45deg);\n }\n\n .navbar-hamburger.open .hamburger-line:nth-child(2) {\n opacity: 0;\n }\n\n .navbar-hamburger.open .hamburger-line:nth-child(3) {\n transform: translateY(-6px) rotate(-45deg);\n }\n\n /* Mobile menu */\n .navbar-mobile-menu {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background-color: inherit;\n box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n padding: 1rem;\n flex-direction: column;\n gap: 0.5rem;\n opacity: 0;\n transform: translateY(-0.5rem);\n transition:\n opacity 200ms ease,\n transform 200ms ease;\n pointer-events: none;\n }\n\n .navbar-mobile-menu.open {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n }\n\n /* Slotted content styling */\n ::slotted(*) {\n display: flex;\n align-items: center;\n }\n\n ::slotted(a) {\n text-decoration: none;\n color: inherit;\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n transition: background-color 150ms ease;\n }\n\n ::slotted(a:hover) {\n background-color: var(--color-surface-variant, rgba(0, 0, 0, 0.1));\n }\n\n /* Responsive styles */\n @media (max-width: 768px) {\n .navbar-hamburger {\n display: flex;\n }\n\n .navbar-center {\n display: none;\n }\n\n .navbar-mobile-menu {\n display: flex;\n }\n }\n`;\n\nexport class ElDmNavbar extends BaseElement {\n static properties = {\n fixed: { type: Boolean, reflect: true },\n elevated: { type: Boolean, reflect: true },\n color: { type: String, reflect: true },\n };\n\n /** Whether the navbar is fixed to the top */\n declare fixed: boolean;\n\n /** Whether the navbar has shadow elevation */\n declare elevated: boolean;\n\n /** Navbar color variant */\n declare color: NavbarColor;\n\n /** Internal state for mobile menu */\n private _mobileMenuOpen = false;\n\n /** Bound scroll handler for cleanup */\n private _scrollHandler: (() => void) | null = null;\n\n constructor() {\n super();\n this.attachStyles(styles);\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n // Add scroll listener for auto-elevation when fixed\n if (this.fixed) {\n this._scrollHandler = this._handleScroll.bind(this);\n window.addEventListener('scroll', this._scrollHandler, { passive: true });\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n\n if (this._scrollHandler) {\n window.removeEventListener('scroll', this._scrollHandler);\n this._scrollHandler = null;\n }\n }\n\n /**\n * Handle scroll to auto-elevate fixed navbar\n */\n private _handleScroll(): void {\n if (!this.fixed) return;\n\n const shouldElevate = window.scrollY > 0;\n if (shouldElevate !== this.elevated) {\n this.elevated = shouldElevate;\n }\n }\n\n /**\n * Toggle mobile menu\n */\n private _toggleMobileMenu(): void {\n this._mobileMenuOpen = !this._mobileMenuOpen;\n this.emit('menu-toggle', { open: this._mobileMenuOpen });\n this.update();\n }\n\n /**\n * Close mobile menu\n */\n closeMobileMenu(): void {\n if (this._mobileMenuOpen) {\n this._mobileMenuOpen = false;\n this.emit('menu-toggle', { open: false });\n this.update();\n }\n }\n\n /**\n * Open mobile menu\n */\n openMobileMenu(): void {\n if (!this._mobileMenuOpen) {\n this._mobileMenuOpen = true;\n this.emit('menu-toggle', { open: true });\n this.update();\n }\n }\n\n /**\n * Build CSS class string for the navbar\n */\n private _getNavbarClasses(): string {\n const classes = ['navbar'];\n\n if (this.color && this.color !== 'surface') {\n classes.push(`navbar-${this.color}`);\n }\n\n if (this.elevated) {\n classes.push('navbar-elevated');\n }\n\n return classes.join(' ');\n }\n\n render(): string {\n const navbarClasses = this._getNavbarClasses();\n const hamburgerClasses = this._mobileMenuOpen ? 'navbar-hamburger open' : 'navbar-hamburger';\n const mobileMenuClasses = this._mobileMenuOpen\n ? 'navbar-mobile-menu open'\n : 'navbar-mobile-menu';\n\n return `\n <nav class=\"${navbarClasses}\" part=\"navbar\" role=\"navigation\">\n <div class=\"navbar-content\" part=\"content\">\n <div class=\"navbar-start\" part=\"start\">\n <slot name=\"start\"></slot>\n </div>\n <div class=\"navbar-center\" part=\"center\">\n <slot></slot>\n </div>\n <div class=\"navbar-end\" part=\"end\">\n <slot name=\"end\"></slot>\n <button\n class=\"${hamburgerClasses}\"\n part=\"hamburger\"\n type=\"button\"\n aria-label=\"${this._mobileMenuOpen ? 'Close menu' : 'Open menu'}\"\n aria-expanded=\"${this._mobileMenuOpen ? 'true' : 'false'}\"\n aria-controls=\"mobile-menu\"\n >\n <span class=\"hamburger-line\"></span>\n <span class=\"hamburger-line\"></span>\n <span class=\"hamburger-line\"></span>\n </button>\n </div>\n </div>\n <div\n id=\"mobile-menu\"\n class=\"${mobileMenuClasses}\"\n part=\"mobile-menu\"\n aria-hidden=\"${this._mobileMenuOpen ? 'false' : 'true'}\"\n >\n <slot name=\"mobile\"></slot>\n </div>\n </nav>\n `;\n }\n\n update(): void {\n super.update();\n\n // Attach click handler to hamburger button\n const hamburger = this.shadowRoot?.querySelector('.navbar-hamburger');\n hamburger?.addEventListener('click', this._toggleMobileMenu.bind(this));\n }\n}\n",
|
|
6
|
+
"/**\n * @duskmoon-dev/el-navbar\n *\n * DuskMoon Navbar custom element\n */\n\nimport { ElDmNavbar } from './el-dm-navbar.js';\n\nexport { ElDmNavbar };\nexport type { NavbarColor } from './el-dm-navbar.js';\n\n/**\n * Register the el-dm-navbar custom element\n *\n * @example\n * ```ts\n * import { register } from '@duskmoon-dev/el-navbar';\n * register();\n * ```\n */\nexport function register(): void {\n if (!customElements.get('el-dm-navbar')) {\n customElements.define('el-dm-navbar', ElDmNavbar);\n }\n}\n"
|
|
7
|
+
],
|
|
8
|
+
"mappings": "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",
|
|
9
|
+
"debugId": "C8090F6B0B6033FD64756E2164756E21",
|
|
10
|
+
"names": []
|
|
11
|
+
}
|