@nextrap/nte-nav 0.2.12 → 0.2.18
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/CHANGELOG.md +37 -0
- package/index.css +1 -1
- package/index.js +21 -19
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,40 @@
|
|
|
1
|
+
## 0.2.18 (2025-07-21)
|
|
2
|
+
|
|
3
|
+
This was a version bump only for nte-nav to align it with other projects, there were no code changes.
|
|
4
|
+
|
|
5
|
+
## 0.2.17 (2025-07-21)
|
|
6
|
+
|
|
7
|
+
### 🧱 Updated Dependencies
|
|
8
|
+
|
|
9
|
+
- Updated nte-offcanvas to 0.0.10
|
|
10
|
+
|
|
11
|
+
## 0.2.16 (2025-07-21)
|
|
12
|
+
|
|
13
|
+
### 🧱 Updated Dependencies
|
|
14
|
+
|
|
15
|
+
- Updated nte-offcanvas to 0.0.9
|
|
16
|
+
|
|
17
|
+
## 0.2.15 (2025-07-21)
|
|
18
|
+
|
|
19
|
+
### 🧱 Updated Dependencies
|
|
20
|
+
|
|
21
|
+
- Updated style-base to 1.0.1
|
|
22
|
+
- Updated nte-offcanvas to 0.0.8
|
|
23
|
+
|
|
24
|
+
## 0.2.14 (2025-07-21)
|
|
25
|
+
|
|
26
|
+
### 🧱 Updated Dependencies
|
|
27
|
+
|
|
28
|
+
- Updated style-base to 1.0.0
|
|
29
|
+
- Updated nte-offcanvas to 0.0.7
|
|
30
|
+
|
|
31
|
+
## 0.2.13 (2025-07-21)
|
|
32
|
+
|
|
33
|
+
### 🧱 Updated Dependencies
|
|
34
|
+
|
|
35
|
+
- Updated style-base to 0.0.2
|
|
36
|
+
- Updated nte-offcanvas to 0.0.6
|
|
37
|
+
|
|
1
38
|
## 0.2.12 (2025-07-21)
|
|
2
39
|
|
|
3
40
|
This was a version bump only for nte-nav to align it with other projects, there were no code changes.
|
package/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.nav-vertical{width:100%}.nav-vertical ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;width:100%;gap:.15rem;position:relative}.nav-vertical ul>li
|
|
1
|
+
@charset "UTF-8";.nav-vertical{width:100%}.nav-vertical ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;width:100%;gap:.15rem;position:relative}.nav-vertical ul>li{position:relative;display:block}.nav-vertical ul>li>a{display:block;padding:.65em 1.1em;color:var(--text-color);text-decoration:none;transition:background var(--transition),color var(--transition);font-weight:500}.nav-vertical ul>li>a.active,.nav-vertical ul>li>a:active{background-color:var(--hover-color);color:var(--hover-text-color)}.nav-vertical ul>li>a:hover{background-color:var(--hover-color);color:var(--hover-text-color)}.nav-vertical ul>li>a:after{content:"";display:inline-block;margin-left:.47em;margin-bottom:.08em;border:solid currentColor;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg) scale(.8);opacity:0;transition:opacity var(--transition),transform var(--transition)}.nav-vertical ul>li:has(ul)>a:after{opacity:.55}.nav-vertical ul>li:active>a:after,.nav-vertical ul>li:focus-within>a:after{transform:rotate(135deg) scale(.85)}.nav-vertical ul>li:focus-within>ul{display:flex}.nav-vertical ul>li>ul{list-style:none;margin:0;padding:0 0 0 .7em;display:none;flex-direction:column}li>.nav-vertical ul>li>ul,.nav-vertical ul>li>ul:focus-within{display:flex}.nav-vertical ul>li>ul>li>a{padding:.55em 1.1em;font-size:.95em;font-weight:400;color:var(--text-color);transition:background var(--transition),color var(--transition)}.nav-vertical ul>li>ul>li>a:hover{background:var(--hover-color);color:var(--hover-text-color)}.nav-horizontal{--item-padding: .65em 1.1em;--padding: 0}.nav-horizontal.pos-start{--justify-content: flex-start}.nav-horizontal.pos-end{--justify-content: flex-end}.nav-horizontal.pos-center{--justify-content: center}.nav-horizontal.pos-stretch>ul{display:flex}.nav-horizontal.pos-stretch>ul>li{flex-grow:1}.nav-horizontal.pos-stretch>ul>li>a{width:100%;justify-content:center}.nav-horizontal.size-sm{--item-padding: 2px 15px;--item-margin: 2px .2em;--font-size: .6rem}.nav-horizontal.style-pills{--pill-background: rgba(var(--nt-primary-rgb), .8);--pill-radius: .5em;--pill-text-color: var(--nt-text-on-primary);--pill-hover-background: rgba(var(--nt-primary-rgb), 1)}.nav-horizontal.style-pills>ul>li>a{background:var(--pill-background);border-radius:var(--pill-radius);--text-color: var(--pill-text-color);transition:background var(--transition),color var(--transition)}.nav-horizontal.style-pills>ul>li>a:hover,.nav-horizontal.style-pills>ul>li>a:focus{background:var(--pill-hover-background);--font-color: var(--pill-text-color)}.nav-horizontal.style-pills>ul>li>a.active,.nav-horizontal.style-pills>ul>li>a:active{background:var(--pill-hover-background);--font-color: var(--pill-text-color)}.nav-horizontal.style-undecorated{--item-padding: .65em 1.1em;--item-margin: 0;--text-color: var(--nt-text);--hover-color: transparent;--hover-text-color: var(--nt-text);--submenu-bg: var(--nt-light);--submenu-text-color: var(--nt-text)}.nav-horizontal ul{list-style:none;padding:var(--padding);margin:0;display:flex;flex-direction:row;align-items:center;position:relative;height:100%;justify-content:var(--justify-content)}.nav-horizontal ul>li,.nav-horizontal ul li{position:relative;display:flex;align-items:center;height:inherit}.nav-horizontal ul>li>a,.nav-horizontal ul li>a{display:flex;align-items:center;margin:var(--item-margin, 0);height:100%;padding:var(--item-padding);gap:.5em;text-decoration:none;color:var(--text-color);transition:background var(--transition),color var(--transition);font-weight:500}.nav-horizontal ul>li>a.active,.nav-horizontal ul>li>a:active,.nav-horizontal ul li>a.active,.nav-horizontal ul li>a:active{background:var(--hover-color);color:var(--hover-text-color)}.nav-horizontal ul>li>a:hover,li:hover>.nav-horizontal ul>li>a,.nav-horizontal ul li>a:hover,li:hover>.nav-horizontal ul li>a{background:var(--hover-color);color:var(--hover-text-color)}.nav-horizontal ul>li>a:after,.nav-horizontal ul li>a:after{content:"";display:none;margin-left:.47em;margin-bottom:.08em;border:solid currentColor;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg) scale(.8);opacity:0;transition:opacity var(--transition),transform var(--transition)}.nav-horizontal ul>li:has(ul)>a:after,.nav-horizontal ul li:has(ul)>a:after{opacity:.55;display:inline-block}.nav-horizontal ul>li:hover>a:after,.nav-horizontal ul>li:focus-within>a:after,.nav-horizontal ul li:hover>a:after,.nav-horizontal ul li:focus-within>a:after{transform:rotate(-135deg) scale(.85)}.nav-horizontal ul>li>ul,.nav-horizontal ul li>ul{display:block;visibility:hidden;opacity:0;pointer-events:none;min-width:11rem;background:var(--submenu-bg);position:absolute;top:100%;left:0;margin-top:.3em;flex-direction:column;z-index:3;transition:opacity var(--transition),transform var(--transition),visibility var(--transition);transform:translateY(-.7em)}.nav-horizontal ul>li>ul:last-child,.nav-horizontal ul li>ul:last-child{right:0;left:auto}.nav-horizontal ul>li>ul:hover,.nav-horizontal ul>li>ul:focus-within,.nav-horizontal ul li>ul:hover,.nav-horizontal ul li>ul:focus-within{visibility:visible;opacity:1;pointer-events:all;transform:translateY(0)}.nav-horizontal ul>li>ul>li,.nav-horizontal ul li>ul>li{display:flex;height:auto}.nav-horizontal ul>li>ul>li>a,.nav-horizontal ul li>ul>li>a{display:block;width:100%;color:var(--text-color);padding:.63em 1.3em;font-size:.99em;font-weight:400;height:auto;transition:background var(--transition),color var(--transition)}.nav-horizontal ul>li>ul>li>a:hover,.nav-horizontal ul li>ul>li>a:hover{background:var(--hover-color);color:var(--hover-text-color)}.nav-horizontal ul>li:focus-within>ul,.nav-horizontal ul li:focus-within>ul{visibility:visible;opacity:1;pointer-events:all;transform:translateY(0)}nte-navbar.is-scrolled{--bg: rgba(var(--nt-white-rgb), 1)}nte-navbar.autoborder.is-scrolled::part(navbar){border-bottom:1px solid rgba(var(--nt-text-rgb),.1)}nte-navbar.autoshadow::part(navbar){transition:box-shadow .3s ease-in-out}nte-navbar.autoshadow.is-scrolled::part(navbar){box-shadow:0 2px 10px rgba(var(--nt-text-rgb),.1)}nte-navbar.fixed::part(navbar){position:fixed;top:0;left:0;opacity:1;width:100%}nte-navbar.autohide::part(navbar){transition:transform .3s ease-in-out}nte-navbar.autohide.state-pre-scrolled.state-scrolling-down::part(navbar){transform:translateY(-100%)}nte-navbar.autohide.state-pre-scrolled.state-scrolling-up::part(navbar){transform:translateY(0);position:fixed;top:0;left:0;opacity:1;width:100%}nte-navbar.autohide.state-scrolled::part(navbar){position:fixed;top:0;left:0;opacity:1;width:100%;transform:translateY(-100%)}nte-navbar.autohide.state-scrolled.state-scrolling-up::part(navbar){transform:translateY(0);position:fixed;top:0;left:0;opacity:1;width:100%}nte-navbar-line [slot=brand] img{height:var(--brand-height);width:auto}
|
package/index.js
CHANGED
|
@@ -865,7 +865,7 @@ const At = Lt(class extends Rt {
|
|
|
865
865
|
}
|
|
866
866
|
return S;
|
|
867
867
|
}
|
|
868
|
-
}), pe = "*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}a,i{color:inherit;text-decoration:none}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}slot{display:contents}:host{--backdrop: rgba(var(--nt-dark-rgb), .5);--header-background:
|
|
868
|
+
}), pe = "*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}a,i{color:inherit;text-decoration:none}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}slot{display:contents}:host{--backdrop: rgba(var(--nt-dark-rgb), .5);--header-background: transparent;--background-color: var(--nt-soft-primary);--shadow-color: rgba(var(--nt-dark-rgb), .5);--main-padding: 0;--header-padding: var(--nt-space);position:fixed;top:0;right:0;height:100vh;width:50%;min-width:250px;max-width:500px;z-index:2000;padding:0;isolation:isolate;display:block}:host[opened]{display:block}#offcanvas{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--background-color);box-shadow:0 0 10px var(--shadow-color);transition:transform .2s ease-in-out;transform:translate(0)}#offcanvas.closed{transform:translate(100%)}#header{display:flex;width:100%;flex-direction:row;justify-content:space-between;align-items:center;background-color:var(--header-background);flex-grow:0;padding:var(--header-padding)}#header:has(>slot[empty]){display:none}#main{display:flex;width:100%;flex-grow:1;padding:var(--main-padding);min-height:200px;overflow:auto;scroll-behavior:auto;scrollbar-gutter:stable;height:100%}#footer{display:flex;width:100%;flex-direction:row;justify-content:space-between;align-items:center;margin-top:auto;flex-grow:0;padding:var(--padding)}#footer:has(>slot[empty]){display:none}#backdrop{opacity:1;transition:opacity .2s ease-in-out;position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--backdrop);z-index:-1;display:block}#backdrop.closed{opacity:0}";
|
|
869
869
|
var ue = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, K = (s, t, e, i) => {
|
|
870
870
|
for (var n = i > 1 ? void 0 : i ? fe(t, e) : t, r = s.length - 1, o; r >= 0; r--)
|
|
871
871
|
(o = s[r]) && (n = (i ? o(t, e, n) : o(n)) || n);
|
|
@@ -939,7 +939,7 @@ K([
|
|
|
939
939
|
x = K([
|
|
940
940
|
z(x.is)
|
|
941
941
|
], x);
|
|
942
|
-
const ve = ":host{--container-width: var(--nt-container-width);--text-color: var(--nt-text-color);--hover-color: var(--nt-primary);--hover-text-color: var(--nt-text-on-primary);--transition: .2s ease-in-out;--submenu-bg: var(--nt-light);--submenu-text-color: var(--nt-text);--justify-content: center;--sidemenu-bg: var(--nt-soft-primary);--justify-sidebar-burger: flex-end;--height: auto;height:var(--height);display:block}nav{height:100%}#main{height:100%}";
|
|
942
|
+
const ve = ":host{--container-width: var(--nt-container-width);--text-color: var(--nt-text-color);--hover-color: var(--nt-primary);--hover-text-color: var(--nt-text-on-primary);--transition: .2s ease-in-out;--submenu-bg: var(--nt-light);--submenu-text-color: var(--nt-text);--justify-content: center;--sidemenu-bg: var(--nt-soft-primary);--justify-sidebar-burger: flex-end;--height: auto;height:var(--height);display:block}nav{height:100%}#main{height:100%}#burger-wrapper{padding:15px}";
|
|
943
943
|
var me = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, I = (s, t, e, i) => {
|
|
944
944
|
for (var n = i > 1 ? void 0 : i ? ge(t, e) : t, r = s.length - 1, o; r >= 0; r--)
|
|
945
945
|
(o = s[r]) && (n = (i ? o(t, e, n) : o(n)) || n);
|
|
@@ -958,24 +958,26 @@ let $ = class extends _ {
|
|
|
958
958
|
}
|
|
959
959
|
render() {
|
|
960
960
|
return R` <nav>
|
|
961
|
-
<
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
961
|
+
<div id="burger-wrapper" ?hidden=${!this._isTransferred}>
|
|
962
|
+
<slot
|
|
963
|
+
name="burger"
|
|
964
|
+
open
|
|
965
|
+
aria-haspopup="true"
|
|
966
|
+
id="burger"
|
|
967
|
+
class="burger"
|
|
968
|
+
@click=${() => {
|
|
969
969
|
var s;
|
|
970
970
|
return (s = this.getOffcanvas()) == null ? void 0 : s.open();
|
|
971
971
|
}}
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
972
|
+
>
|
|
973
|
+
<!-- fallback icon -->
|
|
974
|
+
${this._isTransferred ? R`<div style="display:flex; align-items: center; justify-content: center;">
|
|
975
|
+
<div id="text"><slot name="menu-text"></slot></div>
|
|
976
|
+
<nte-burger id="open-burger"></nte-burger>
|
|
977
|
+
</div>` : ""}
|
|
978
|
+
</slot>
|
|
979
|
+
</div>
|
|
980
|
+
|
|
979
981
|
<div class="nt-nav-links" id="main" part="main">
|
|
980
982
|
<slot id="main-slot"></slot>
|
|
981
983
|
</div>
|
|
@@ -1129,7 +1131,7 @@ const st = /* @__PURE__ */ new WeakMap(), Et = Lt(class extends we {
|
|
|
1129
1131
|
reconnected() {
|
|
1130
1132
|
this.rt(this.ct);
|
|
1131
1133
|
}
|
|
1132
|
-
}), xe = "*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}a,i{color:inherit;text-decoration:none}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}slot{display:contents}:host{--bg: transparent;--spacer-bg: transparent;--container-width: var(--nt-container-width, 100%);--brand-height: 80px;isolation:isolate;margin:0}:host(a){height:85px;width:auto}#wrapper{position:relative;left:0;top:0;right:0;width:100%}#spacer{position:relative;top:0;left:0;width:100%;height:var(--brand-height);background-color:var(--spacer-bg)}#navbar{position:absolute;top:0;width:
|
|
1134
|
+
}), xe = "*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}a,i{color:inherit;text-decoration:none}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}slot{display:contents}:host{--bg: transparent;--spacer-bg: transparent;--container-width: var(--nt-container-width, 100%);--brand-height: 80px;width:100vw;isolation:isolate;margin:0}:host(a){height:85px;width:auto}#wrapper{position:relative;left:0;top:0;right:0;width:100%}#spacer{position:relative;top:0;left:0;width:100%;height:var(--brand-height);background-color:var(--spacer-bg)}#navbar{position:absolute;top:0;width:100vw;height:auto;background-color:var(--bg);z-index:1000}#main{width:100vw;display:block}";
|
|
1133
1135
|
var Ee = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, jt = (s, t, e, i) => {
|
|
1134
1136
|
for (var n = i > 1 ? void 0 : i ? Se(t, e) : t, r = s.length - 1, o; r >= 0; r--)
|
|
1135
1137
|
(o = s[r]) && (n = (i ? o(t, e, n) : o(n)) || n);
|
|
@@ -1187,7 +1189,7 @@ jt([
|
|
|
1187
1189
|
Y = jt([
|
|
1188
1190
|
z("nte-navbar")
|
|
1189
1191
|
], Y);
|
|
1190
|
-
const Ce = "*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}a,i{color:inherit;text-decoration:none}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}slot{display:contents}:host{--container-width: var(--nt-container-width, 100%);--background: transparent;--text-color: var(--nt-text);--height: auto;--brand-height: 80px;display:block;height:100%}:host(.hide-on-scroll){transition:max-height .3s ease-in-out;max-height:100px}:host(.hide-on-scroll.is-scrolled){max-height:0;overflow:hidden}#main{height:var(--height);transition:height .2s ease-in-out;overflow:visible;width:100%;display:flex;background:var(--background)}#container{width:var(--container-width);margin:0 auto;display:flex}#container #brand{width:auto;align-items:start;display:flex;height:100%;justify-items:center}#container #brand:has(slot[empty]){display:none}#container #nav{display:flex;flex-grow:1;justify-content:end;align-items:center;gap:1rem}";
|
|
1192
|
+
const Ce = "*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}a,i{color:inherit;text-decoration:none}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}slot{display:contents}:host{--container-width: var(--nt-container-width, 100%);--background: transparent;--text-color: var(--nt-text);--height: auto;--brand-height: 80px;display:block;height:100%;width:100%}:host(.hide-on-scroll){transition:max-height .3s ease-in-out;max-height:100px}:host(.hide-on-scroll.is-scrolled){max-height:0;overflow:hidden}#main{height:var(--height);transition:height .2s ease-in-out;overflow:visible;width:100%;display:flex;background:var(--background)}#container{width:var(--container-width);margin:0 auto;display:flex}#container #brand{width:auto;align-items:start;display:flex;height:100%;justify-items:center}#container #brand:has(slot[empty]){display:none}#container #nav{display:flex;flex-grow:1;justify-content:end;align-items:center;gap:1rem}";
|
|
1191
1193
|
var Te = Object.getOwnPropertyDescriptor, Pe = (s, t, e, i) => {
|
|
1192
1194
|
for (var n = i > 1 ? void 0 : i ? Te(t, e) : t, r = s.length - 1, o; r >= 0; r--)
|
|
1193
1195
|
(o = s[r]) && (n = o(n) || n);
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nextrap/nte-nav",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.18",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@nextrap/nt-framework": "^0.0.1",
|
|
7
7
|
"@nextrap/nte-burger": "^0.0.1",
|
|
8
|
-
"@nextrap/nte-offcanvas": "^0.0.
|
|
8
|
+
"@nextrap/nte-offcanvas": "^0.0.10"
|
|
9
9
|
},
|
|
10
10
|
"devDependencies": {
|
|
11
|
-
"@nextrap/style-base": "^
|
|
11
|
+
"@nextrap/style-base": "^1.0.1",
|
|
12
12
|
"@nextrap/style-reset": "^0.1.1"
|
|
13
13
|
},
|
|
14
14
|
"type": "module",
|