@duskmoon-dev/el-navbar 0.5.0 → 0.7.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 +144 -0
- package/dist/cjs/index.js +20 -31
- package/dist/cjs/index.js.map +3 -3
- package/dist/cjs/register.js +20 -31
- package/dist/cjs/register.js.map +3 -3
- package/dist/esm/index.js +18 -29
- package/dist/esm/index.js.map +3 -3
- package/dist/esm/register.js +18 -29
- package/dist/esm/register.js.map +3 -3
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/el-dm-navbar.d.ts +30 -2
- package/dist/types/el-dm-navbar.d.ts.map +1 -1
- package/package.json +6 -5
package/README.md
ADDED
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
# @duskmoon-dev/el-navbar
|
|
2
|
+
|
|
3
|
+
A navigation bar component built with Web Components.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @duskmoon-dev/el-navbar
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Auto-Register
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
import '@duskmoon-dev/el-navbar/register';
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<el-dm-navbar>
|
|
21
|
+
<a slot="start" href="/">Logo</a>
|
|
22
|
+
<nav>
|
|
23
|
+
<a href="/about">About</a>
|
|
24
|
+
<a href="/contact">Contact</a>
|
|
25
|
+
</nav>
|
|
26
|
+
<div slot="end">
|
|
27
|
+
<el-dm-button>Sign In</el-dm-button>
|
|
28
|
+
</div>
|
|
29
|
+
</el-dm-navbar>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Manual Registration
|
|
33
|
+
|
|
34
|
+
```typescript
|
|
35
|
+
import { ElDmNavbar, register } from '@duskmoon-dev/el-navbar';
|
|
36
|
+
|
|
37
|
+
// Register with default tag name
|
|
38
|
+
register();
|
|
39
|
+
|
|
40
|
+
// Or register with custom tag name
|
|
41
|
+
customElements.define('my-navbar', ElDmNavbar);
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Attributes
|
|
45
|
+
|
|
46
|
+
| Attribute | Type | Default | Description |
|
|
47
|
+
|-----------|------|---------|-------------|
|
|
48
|
+
| `fixed` | `boolean` | `false` | Fix navbar to top of viewport |
|
|
49
|
+
| `elevated` | `boolean` | `false` | Add shadow/elevation |
|
|
50
|
+
| `color` | `string` | - | Background color variant |
|
|
51
|
+
|
|
52
|
+
## Slots
|
|
53
|
+
|
|
54
|
+
| Slot | Description |
|
|
55
|
+
|------|-------------|
|
|
56
|
+
| `start` | Left side content (logo) |
|
|
57
|
+
| (default) | Center content (navigation) |
|
|
58
|
+
| `end` | Right side content (actions) |
|
|
59
|
+
|
|
60
|
+
## CSS Parts
|
|
61
|
+
|
|
62
|
+
| Part | Description |
|
|
63
|
+
|------|-------------|
|
|
64
|
+
| `navbar` | The navbar container |
|
|
65
|
+
| `content` | The content wrapper |
|
|
66
|
+
| `start` | The start section |
|
|
67
|
+
| `center` | The center section |
|
|
68
|
+
| `end` | The end section |
|
|
69
|
+
| `hamburger` | The mobile menu button |
|
|
70
|
+
| `mobile-menu` | The mobile menu container |
|
|
71
|
+
|
|
72
|
+
## Events
|
|
73
|
+
|
|
74
|
+
| Event | Detail | Description |
|
|
75
|
+
|-------|--------|-------------|
|
|
76
|
+
| `menu-toggle` | `{ open }` | Fired when mobile menu toggles |
|
|
77
|
+
|
|
78
|
+
## Examples
|
|
79
|
+
|
|
80
|
+
### Basic
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<el-dm-navbar>
|
|
84
|
+
<a slot="start" href="/">Brand</a>
|
|
85
|
+
<nav>
|
|
86
|
+
<a href="/home">Home</a>
|
|
87
|
+
<a href="/about">About</a>
|
|
88
|
+
<a href="/services">Services</a>
|
|
89
|
+
</nav>
|
|
90
|
+
<div slot="end">
|
|
91
|
+
<el-dm-button variant="primary">Get Started</el-dm-button>
|
|
92
|
+
</div>
|
|
93
|
+
</el-dm-navbar>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Fixed Position
|
|
97
|
+
|
|
98
|
+
```html
|
|
99
|
+
<el-dm-navbar fixed elevated>
|
|
100
|
+
...
|
|
101
|
+
</el-dm-navbar>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### With Elevation
|
|
105
|
+
|
|
106
|
+
```html
|
|
107
|
+
<el-dm-navbar elevated>
|
|
108
|
+
...
|
|
109
|
+
</el-dm-navbar>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Custom Color
|
|
113
|
+
|
|
114
|
+
```html
|
|
115
|
+
<el-dm-navbar color="primary">
|
|
116
|
+
...
|
|
117
|
+
</el-dm-navbar>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### Responsive Navigation
|
|
121
|
+
|
|
122
|
+
```html
|
|
123
|
+
<el-dm-navbar>
|
|
124
|
+
<a slot="start" href="/">Logo</a>
|
|
125
|
+
<nav>
|
|
126
|
+
<a href="/home">Home</a>
|
|
127
|
+
<a href="/about">About</a>
|
|
128
|
+
</nav>
|
|
129
|
+
<div slot="end">
|
|
130
|
+
<el-dm-button>Login</el-dm-button>
|
|
131
|
+
</div>
|
|
132
|
+
</el-dm-navbar>
|
|
133
|
+
|
|
134
|
+
<script>
|
|
135
|
+
const navbar = document.querySelector('el-dm-navbar');
|
|
136
|
+
navbar.addEventListener('menu-toggle', (e) => {
|
|
137
|
+
console.log('Menu open:', e.detail.open);
|
|
138
|
+
});
|
|
139
|
+
</script>
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## License
|
|
143
|
+
|
|
144
|
+
MIT
|
package/dist/cjs/index.js
CHANGED
|
@@ -35,8 +35,10 @@ __export(exports_src, {
|
|
|
35
35
|
module.exports = __toCommonJS(exports_src);
|
|
36
36
|
|
|
37
37
|
// src/el-dm-navbar.ts
|
|
38
|
-
var
|
|
39
|
-
var
|
|
38
|
+
var import_el_base = require("@duskmoon-dev/el-base");
|
|
39
|
+
var import_navigation = require("@duskmoon-dev/core/components/navigation");
|
|
40
|
+
var coreStyles = import_navigation.css.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
|
|
41
|
+
var styles = import_el_base.css`
|
|
40
42
|
:host {
|
|
41
43
|
display: block;
|
|
42
44
|
width: 100%;
|
|
@@ -54,15 +56,14 @@ var styles = import_el_core.css`
|
|
|
54
56
|
z-index: 100;
|
|
55
57
|
}
|
|
56
58
|
|
|
59
|
+
/* Import core navigation styles */
|
|
60
|
+
${coreStyles}
|
|
61
|
+
|
|
62
|
+
/* Web component specific adjustments */
|
|
57
63
|
.navbar {
|
|
58
|
-
|
|
59
|
-
align-items: center;
|
|
64
|
+
font-family: inherit;
|
|
60
65
|
justify-content: space-between;
|
|
61
|
-
min-height: 4rem;
|
|
62
66
|
padding: 0 1.5rem;
|
|
63
|
-
background-color: var(--color-surface);
|
|
64
|
-
color: var(--color-on-surface);
|
|
65
|
-
font-family: inherit;
|
|
66
67
|
transition:
|
|
67
68
|
background-color 200ms ease,
|
|
68
69
|
box-shadow 200ms ease;
|
|
@@ -101,27 +102,11 @@ var styles = import_el_core.css`
|
|
|
101
102
|
gap: 1rem;
|
|
102
103
|
}
|
|
103
104
|
|
|
104
|
-
.navbar-start {
|
|
105
|
-
display: flex;
|
|
106
|
-
align-items: center;
|
|
107
|
-
flex-shrink: 0;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
105
|
.navbar-center {
|
|
111
|
-
display: flex;
|
|
112
|
-
align-items: center;
|
|
113
|
-
gap: 0.5rem;
|
|
114
106
|
flex: 1;
|
|
115
107
|
justify-content: center;
|
|
116
108
|
}
|
|
117
109
|
|
|
118
|
-
.navbar-end {
|
|
119
|
-
display: flex;
|
|
120
|
-
align-items: center;
|
|
121
|
-
gap: 0.5rem;
|
|
122
|
-
flex-shrink: 0;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
110
|
/* Hamburger button */
|
|
126
111
|
.navbar-hamburger {
|
|
127
112
|
display: none;
|
|
@@ -235,11 +220,15 @@ var styles = import_el_core.css`
|
|
|
235
220
|
}
|
|
236
221
|
`;
|
|
237
222
|
|
|
238
|
-
class ElDmNavbar extends
|
|
223
|
+
class ElDmNavbar extends import_el_base.BaseElement {
|
|
239
224
|
static properties = {
|
|
240
225
|
fixed: { type: Boolean, reflect: true },
|
|
241
226
|
elevated: { type: Boolean, reflect: true },
|
|
242
|
-
color: { type: String, reflect: true }
|
|
227
|
+
color: { type: String, reflect: true },
|
|
228
|
+
navLabel: { type: String, reflect: true, attribute: "nav-label" },
|
|
229
|
+
startClass: { type: String, reflect: true, attribute: "start-class" },
|
|
230
|
+
centerClass: { type: String, reflect: true, attribute: "center-class" },
|
|
231
|
+
endClass: { type: String, reflect: true, attribute: "end-class" }
|
|
243
232
|
};
|
|
244
233
|
_mobileMenuOpen = false;
|
|
245
234
|
_scrollHandler = null;
|
|
@@ -303,15 +292,15 @@ class ElDmNavbar extends import_el_core.BaseElement {
|
|
|
303
292
|
const hamburgerClasses = this._mobileMenuOpen ? "navbar-hamburger open" : "navbar-hamburger";
|
|
304
293
|
const mobileMenuClasses = this._mobileMenuOpen ? "navbar-mobile-menu open" : "navbar-mobile-menu";
|
|
305
294
|
return `
|
|
306
|
-
<nav class="${navbarClasses}" part="navbar" role="navigation">
|
|
295
|
+
<nav class="${navbarClasses}" part="navbar" role="navigation"${this.navLabel ? ` aria-label="${this.navLabel}"` : ""}>
|
|
307
296
|
<div class="navbar-content" part="content">
|
|
308
|
-
<div class="navbar-start" part="start">
|
|
297
|
+
<div class="navbar-start${this.startClass ? ` ${this.startClass}` : ""}" part="start">
|
|
309
298
|
<slot name="start"></slot>
|
|
310
299
|
</div>
|
|
311
|
-
<div class="navbar-center" part="center">
|
|
300
|
+
<div class="navbar-center${this.centerClass ? ` ${this.centerClass}` : ""}" part="center">
|
|
312
301
|
<slot></slot>
|
|
313
302
|
</div>
|
|
314
|
-
<div class="navbar-end" part="end">
|
|
303
|
+
<div class="navbar-end${this.endClass ? ` ${this.endClass}` : ""}" part="end">
|
|
315
304
|
<slot name="end"></slot>
|
|
316
305
|
<button
|
|
317
306
|
class="${hamburgerClasses}"
|
|
@@ -352,5 +341,5 @@ function register() {
|
|
|
352
341
|
}
|
|
353
342
|
}
|
|
354
343
|
|
|
355
|
-
//# debugId=
|
|
344
|
+
//# debugId=DDB12670D585C0A764756E2164756E21
|
|
356
345
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/el-dm-navbar.ts", "../../src/index.ts"],
|
|
4
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",
|
|
5
|
+
"/**\n * DuskMoon Navbar Element\n *\n * A primary navigation bar/header component with responsive design.\n * Uses styles from @duskmoon-dev/core 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-base';\nimport { css as navigationCSS } from '@duskmoon-dev/core/components/navigation';\n\nexport type NavbarColor = 'surface' | 'primary' | 'secondary' | 'tertiary';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = navigationCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\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 /* Import core navigation styles */\n ${coreStyles}\n\n /* Web component specific adjustments */\n .navbar {\n font-family: inherit;\n justify-content: space-between;\n padding: 0 1.5rem;\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-center {\n flex: 1;\n justify-content: center;\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 navLabel: { type: String, reflect: true, attribute: 'nav-label' },\n startClass: { type: String, reflect: true, attribute: 'start-class' },\n centerClass: { type: String, reflect: true, attribute: 'center-class' },\n endClass: { type: String, reflect: true, attribute: 'end-class' },\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 /** Accessible label for the navigation landmark */\n declare navLabel: string;\n\n /** CSS class(es) to add to the start section */\n declare startClass: string;\n\n /** CSS class(es) to add to the center section */\n declare centerClass: string;\n\n /** CSS class(es) to add to the end section */\n declare endClass: string;\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\"${this.navLabel ? ` aria-label=\"${this.navLabel}\"` : ''}>\n <div class=\"navbar-content\" part=\"content\">\n <div class=\"navbar-start${this.startClass ? ` ${this.startClass}` : ''}\" part=\"start\">\n <slot name=\"start\"></slot>\n </div>\n <div class=\"navbar-center${this.centerClass ? ` ${this.centerClass}` : ''}\" part=\"center\">\n <slot></slot>\n </div>\n <div class=\"navbar-end${this.endClass ? ` ${this.endClass}` : ''}\" 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
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
7
|
],
|
|
8
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BiC,IAAjC;
|
|
9
|
-
"debugId": "
|
|
8
|
+
"mappings": "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",
|
|
9
|
+
"debugId": "DDB12670D585C0A764756E2164756E21",
|
|
10
10
|
"names": []
|
|
11
11
|
}
|
package/dist/cjs/register.js
CHANGED
|
@@ -35,8 +35,10 @@ __export(exports_src, {
|
|
|
35
35
|
module.exports = __toCommonJS(exports_src);
|
|
36
36
|
|
|
37
37
|
// src/el-dm-navbar.ts
|
|
38
|
-
var
|
|
39
|
-
var
|
|
38
|
+
var import_el_base = require("@duskmoon-dev/el-base");
|
|
39
|
+
var import_navigation = require("@duskmoon-dev/core/components/navigation");
|
|
40
|
+
var coreStyles = import_navigation.css.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
|
|
41
|
+
var styles = import_el_base.css`
|
|
40
42
|
:host {
|
|
41
43
|
display: block;
|
|
42
44
|
width: 100%;
|
|
@@ -54,15 +56,14 @@ var styles = import_el_core.css`
|
|
|
54
56
|
z-index: 100;
|
|
55
57
|
}
|
|
56
58
|
|
|
59
|
+
/* Import core navigation styles */
|
|
60
|
+
${coreStyles}
|
|
61
|
+
|
|
62
|
+
/* Web component specific adjustments */
|
|
57
63
|
.navbar {
|
|
58
|
-
|
|
59
|
-
align-items: center;
|
|
64
|
+
font-family: inherit;
|
|
60
65
|
justify-content: space-between;
|
|
61
|
-
min-height: 4rem;
|
|
62
66
|
padding: 0 1.5rem;
|
|
63
|
-
background-color: var(--color-surface);
|
|
64
|
-
color: var(--color-on-surface);
|
|
65
|
-
font-family: inherit;
|
|
66
67
|
transition:
|
|
67
68
|
background-color 200ms ease,
|
|
68
69
|
box-shadow 200ms ease;
|
|
@@ -101,27 +102,11 @@ var styles = import_el_core.css`
|
|
|
101
102
|
gap: 1rem;
|
|
102
103
|
}
|
|
103
104
|
|
|
104
|
-
.navbar-start {
|
|
105
|
-
display: flex;
|
|
106
|
-
align-items: center;
|
|
107
|
-
flex-shrink: 0;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
105
|
.navbar-center {
|
|
111
|
-
display: flex;
|
|
112
|
-
align-items: center;
|
|
113
|
-
gap: 0.5rem;
|
|
114
106
|
flex: 1;
|
|
115
107
|
justify-content: center;
|
|
116
108
|
}
|
|
117
109
|
|
|
118
|
-
.navbar-end {
|
|
119
|
-
display: flex;
|
|
120
|
-
align-items: center;
|
|
121
|
-
gap: 0.5rem;
|
|
122
|
-
flex-shrink: 0;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
110
|
/* Hamburger button */
|
|
126
111
|
.navbar-hamburger {
|
|
127
112
|
display: none;
|
|
@@ -235,11 +220,15 @@ var styles = import_el_core.css`
|
|
|
235
220
|
}
|
|
236
221
|
`;
|
|
237
222
|
|
|
238
|
-
class ElDmNavbar extends
|
|
223
|
+
class ElDmNavbar extends import_el_base.BaseElement {
|
|
239
224
|
static properties = {
|
|
240
225
|
fixed: { type: Boolean, reflect: true },
|
|
241
226
|
elevated: { type: Boolean, reflect: true },
|
|
242
|
-
color: { type: String, reflect: true }
|
|
227
|
+
color: { type: String, reflect: true },
|
|
228
|
+
navLabel: { type: String, reflect: true, attribute: "nav-label" },
|
|
229
|
+
startClass: { type: String, reflect: true, attribute: "start-class" },
|
|
230
|
+
centerClass: { type: String, reflect: true, attribute: "center-class" },
|
|
231
|
+
endClass: { type: String, reflect: true, attribute: "end-class" }
|
|
243
232
|
};
|
|
244
233
|
_mobileMenuOpen = false;
|
|
245
234
|
_scrollHandler = null;
|
|
@@ -303,15 +292,15 @@ class ElDmNavbar extends import_el_core.BaseElement {
|
|
|
303
292
|
const hamburgerClasses = this._mobileMenuOpen ? "navbar-hamburger open" : "navbar-hamburger";
|
|
304
293
|
const mobileMenuClasses = this._mobileMenuOpen ? "navbar-mobile-menu open" : "navbar-mobile-menu";
|
|
305
294
|
return `
|
|
306
|
-
<nav class="${navbarClasses}" part="navbar" role="navigation">
|
|
295
|
+
<nav class="${navbarClasses}" part="navbar" role="navigation"${this.navLabel ? ` aria-label="${this.navLabel}"` : ""}>
|
|
307
296
|
<div class="navbar-content" part="content">
|
|
308
|
-
<div class="navbar-start" part="start">
|
|
297
|
+
<div class="navbar-start${this.startClass ? ` ${this.startClass}` : ""}" part="start">
|
|
309
298
|
<slot name="start"></slot>
|
|
310
299
|
</div>
|
|
311
|
-
<div class="navbar-center" part="center">
|
|
300
|
+
<div class="navbar-center${this.centerClass ? ` ${this.centerClass}` : ""}" part="center">
|
|
312
301
|
<slot></slot>
|
|
313
302
|
</div>
|
|
314
|
-
<div class="navbar-end" part="end">
|
|
303
|
+
<div class="navbar-end${this.endClass ? ` ${this.endClass}` : ""}" part="end">
|
|
315
304
|
<slot name="end"></slot>
|
|
316
305
|
<button
|
|
317
306
|
class="${hamburgerClasses}"
|
|
@@ -355,5 +344,5 @@ function register() {
|
|
|
355
344
|
// src/register.ts
|
|
356
345
|
register();
|
|
357
346
|
|
|
358
|
-
//# debugId=
|
|
347
|
+
//# debugId=8B8EEE88881A22EA64756E2164756E21
|
|
359
348
|
//# sourceMappingURL=register.js.map
|
package/dist/cjs/register.js.map
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/el-dm-navbar.ts", "../../src/index.ts", "../../src/register.ts"],
|
|
4
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",
|
|
5
|
+
"/**\n * DuskMoon Navbar Element\n *\n * A primary navigation bar/header component with responsive design.\n * Uses styles from @duskmoon-dev/core 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-base';\nimport { css as navigationCSS } from '@duskmoon-dev/core/components/navigation';\n\nexport type NavbarColor = 'surface' | 'primary' | 'secondary' | 'tertiary';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = navigationCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\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 /* Import core navigation styles */\n ${coreStyles}\n\n /* Web component specific adjustments */\n .navbar {\n font-family: inherit;\n justify-content: space-between;\n padding: 0 1.5rem;\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-center {\n flex: 1;\n justify-content: center;\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 navLabel: { type: String, reflect: true, attribute: 'nav-label' },\n startClass: { type: String, reflect: true, attribute: 'start-class' },\n centerClass: { type: String, reflect: true, attribute: 'center-class' },\n endClass: { type: String, reflect: true, attribute: 'end-class' },\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 /** Accessible label for the navigation landmark */\n declare navLabel: string;\n\n /** CSS class(es) to add to the start section */\n declare startClass: string;\n\n /** CSS class(es) to add to the center section */\n declare centerClass: string;\n\n /** CSS class(es) to add to the end section */\n declare endClass: string;\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\"${this.navLabel ? ` aria-label=\"${this.navLabel}\"` : ''}>\n <div class=\"navbar-content\" part=\"content\">\n <div class=\"navbar-start${this.startClass ? ` ${this.startClass}` : ''}\" part=\"start\">\n <slot name=\"start\"></slot>\n </div>\n <div class=\"navbar-center${this.centerClass ? ` ${this.centerClass}` : ''}\" part=\"center\">\n <slot></slot>\n </div>\n <div class=\"navbar-end${this.endClass ? ` ${this.endClass}` : ''}\" 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
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
7
|
"/**\n * Auto-register el-dm-navbar custom element\n *\n * @example\n * ```ts\n * import '@duskmoon-dev/el-navbar/register';\n *\n * // Now you can use <el-dm-navbar> in HTML\n * ```\n */\nimport { register } from './index.js';\n\nregister();\n"
|
|
8
8
|
],
|
|
9
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BiC,IAAjC;
|
|
10
|
-
"debugId": "
|
|
9
|
+
"mappings": "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",
|
|
10
|
+
"debugId": "8B8EEE88881A22EA64756E2164756E21",
|
|
11
11
|
"names": []
|
|
12
12
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
// src/el-dm-navbar.ts
|
|
2
|
-
import { BaseElement, css } from "@duskmoon-dev/el-
|
|
2
|
+
import { BaseElement, css } from "@duskmoon-dev/el-base";
|
|
3
|
+
import { css as navigationCSS } from "@duskmoon-dev/core/components/navigation";
|
|
4
|
+
var coreStyles = navigationCSS.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
|
|
3
5
|
var styles = css`
|
|
4
6
|
:host {
|
|
5
7
|
display: block;
|
|
@@ -18,15 +20,14 @@ var styles = css`
|
|
|
18
20
|
z-index: 100;
|
|
19
21
|
}
|
|
20
22
|
|
|
23
|
+
/* Import core navigation styles */
|
|
24
|
+
${coreStyles}
|
|
25
|
+
|
|
26
|
+
/* Web component specific adjustments */
|
|
21
27
|
.navbar {
|
|
22
|
-
|
|
23
|
-
align-items: center;
|
|
28
|
+
font-family: inherit;
|
|
24
29
|
justify-content: space-between;
|
|
25
|
-
min-height: 4rem;
|
|
26
30
|
padding: 0 1.5rem;
|
|
27
|
-
background-color: var(--color-surface);
|
|
28
|
-
color: var(--color-on-surface);
|
|
29
|
-
font-family: inherit;
|
|
30
31
|
transition:
|
|
31
32
|
background-color 200ms ease,
|
|
32
33
|
box-shadow 200ms ease;
|
|
@@ -65,27 +66,11 @@ var styles = css`
|
|
|
65
66
|
gap: 1rem;
|
|
66
67
|
}
|
|
67
68
|
|
|
68
|
-
.navbar-start {
|
|
69
|
-
display: flex;
|
|
70
|
-
align-items: center;
|
|
71
|
-
flex-shrink: 0;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
69
|
.navbar-center {
|
|
75
|
-
display: flex;
|
|
76
|
-
align-items: center;
|
|
77
|
-
gap: 0.5rem;
|
|
78
70
|
flex: 1;
|
|
79
71
|
justify-content: center;
|
|
80
72
|
}
|
|
81
73
|
|
|
82
|
-
.navbar-end {
|
|
83
|
-
display: flex;
|
|
84
|
-
align-items: center;
|
|
85
|
-
gap: 0.5rem;
|
|
86
|
-
flex-shrink: 0;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
74
|
/* Hamburger button */
|
|
90
75
|
.navbar-hamburger {
|
|
91
76
|
display: none;
|
|
@@ -203,7 +188,11 @@ class ElDmNavbar extends BaseElement {
|
|
|
203
188
|
static properties = {
|
|
204
189
|
fixed: { type: Boolean, reflect: true },
|
|
205
190
|
elevated: { type: Boolean, reflect: true },
|
|
206
|
-
color: { type: String, reflect: true }
|
|
191
|
+
color: { type: String, reflect: true },
|
|
192
|
+
navLabel: { type: String, reflect: true, attribute: "nav-label" },
|
|
193
|
+
startClass: { type: String, reflect: true, attribute: "start-class" },
|
|
194
|
+
centerClass: { type: String, reflect: true, attribute: "center-class" },
|
|
195
|
+
endClass: { type: String, reflect: true, attribute: "end-class" }
|
|
207
196
|
};
|
|
208
197
|
_mobileMenuOpen = false;
|
|
209
198
|
_scrollHandler = null;
|
|
@@ -267,15 +256,15 @@ class ElDmNavbar extends BaseElement {
|
|
|
267
256
|
const hamburgerClasses = this._mobileMenuOpen ? "navbar-hamburger open" : "navbar-hamburger";
|
|
268
257
|
const mobileMenuClasses = this._mobileMenuOpen ? "navbar-mobile-menu open" : "navbar-mobile-menu";
|
|
269
258
|
return `
|
|
270
|
-
<nav class="${navbarClasses}" part="navbar" role="navigation">
|
|
259
|
+
<nav class="${navbarClasses}" part="navbar" role="navigation"${this.navLabel ? ` aria-label="${this.navLabel}"` : ""}>
|
|
271
260
|
<div class="navbar-content" part="content">
|
|
272
|
-
<div class="navbar-start" part="start">
|
|
261
|
+
<div class="navbar-start${this.startClass ? ` ${this.startClass}` : ""}" part="start">
|
|
273
262
|
<slot name="start"></slot>
|
|
274
263
|
</div>
|
|
275
|
-
<div class="navbar-center" part="center">
|
|
264
|
+
<div class="navbar-center${this.centerClass ? ` ${this.centerClass}` : ""}" part="center">
|
|
276
265
|
<slot></slot>
|
|
277
266
|
</div>
|
|
278
|
-
<div class="navbar-end" part="end">
|
|
267
|
+
<div class="navbar-end${this.endClass ? ` ${this.endClass}` : ""}" part="end">
|
|
279
268
|
<slot name="end"></slot>
|
|
280
269
|
<button
|
|
281
270
|
class="${hamburgerClasses}"
|
|
@@ -320,5 +309,5 @@ export {
|
|
|
320
309
|
ElDmNavbar
|
|
321
310
|
};
|
|
322
311
|
|
|
323
|
-
//# debugId=
|
|
312
|
+
//# debugId=CD86802EC126B95264756E2164756E21
|
|
324
313
|
//# sourceMappingURL=index.js.map
|