@nextrap/nte-navbar 1.0.0

package/demo/main.scss

@@ -0,0 +1,75 @@
+@use '../index' as navbar;
+
+.nte-navbar-demo {
+  @include navbar.default-style();
+
+  display: grid;
+  gap: 2rem;
+
+  nte-navbar {
+    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+    border-radius: 0.75rem;
+  }
+
+  nte-navbar-line {
+    --background: color-mix(in srgb, Canvas 94%, currentColor);
+    padding-inline: 1rem;
+  }
+
+  .demo-brand {
+    color: inherit;
+    font-weight: 700;
+    text-decoration: none;
+  }
+
+  .demo-links {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  .demo-links a {
+    color: inherit;
+  }
+}
+
+.demo-scroll-page {
+  @include navbar.default-style();
+
+  min-height: 220dvh;
+
+  nte-navbar {
+    --nte-navbar-background: Canvas;
+  }
+
+  nte-navbar-line {
+    padding-inline: 1rem;
+  }
+
+  .demo-links {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  .demo-scroll-content {
+    width: min(100% - 2rem, 72rem);
+    margin-inline: auto;
+    padding-block: 3rem;
+  }
+
+  .demo-scroll-spacer {
+    min-height: 125dvh;
+  }
+}
+
+.demo-offcanvas-nav {
+  display: grid;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.demo-responsive-content {
+  min-height: 60dvh;
+  padding: 2rem;
+}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/components/nte-navbar/nte-navbar';
+export * from './src/components/nte-navbar-line/nte-navbar-line';

package/index.js

@@ -0,0 +1,98 @@
+import { nextrap_element as k } from "@nextrap/nt-core";
+import { unsafeCSS as S, html as z } from "lit";
+import { customElement as $ } from "lit/decorators.js";
+const N = "*,*: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}dialog{color:inherit;background:transparent;border: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%);--nte-navbar-position: static;--nte-navbar-scroll-threshold: 1;--nte-navbar-top: 0;--nte-navbar-background: Canvas;--nte-navbar-background-at-top: var(--nte-navbar-background);--nte-navbar-shadow: 0 .25rem 1rem color-mix(in srgb, currentColor 12%, transparent);--nte-navbar-overlay-offset: 0px;display:block;position:var(--nte-navbar-position);inset-block-start:var(--nte-navbar-top);z-index:var(--nt-navbar-z-index, 10);width:100%;background:var(--nte-navbar-background);transition:background-color .2s ease-in-out,box-shadow .2s ease-in-out}:host(.with-shadow){box-shadow:var(--nte-navbar-shadow)}:host(.with-shadow-on-scroll.is-below-threshold){box-shadow:var(--nte-navbar-shadow)}:host(.with-transparent-at-top:not(.is-below-threshold)){background:transparent;box-shadow:none}:host(.with-overlay-at-top:not(.is-below-threshold)){margin-block-end:calc(-1 * var(--nte-navbar-overlay-offset))}#navbar{display:block;width:100%}";
+var A = Object.create, g = Object.defineProperty, M = Object.getOwnPropertyDescriptor, C = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), O = (e) => {
+  throw TypeError(e);
+}, V = (e, t, r) => t in e ? g(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, Y = (e, t) => g(e, "name", { value: t, configurable: !0 }), q = (e) => [, , , A((e == null ? void 0 : e[C("metadata")]) ?? null)], B = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], T = (e) => e !== void 0 && typeof e != "function" ? O("Function expected") : e, U = (e, t, r, n, o) => ({ kind: B[e], name: t, metadata: n, addInitializer: (a) => r._ ? O("Already initialized") : o.push(T(a || null)) }), G = (e, t) => V(t, C("metadata"), e[3]), H = (e, t, r, n) => {
+  for (var o = 0, a = e[t >> 1], i = a && a.length; o < i; o++) a[o].call(r);
+  return n;
+}, J = (e, t, r, n, o, a) => {
+  var i, d, h, s = t & 7, b = !1, v = 0, m = e[v] || (e[v] = []), l = s && (o = o.prototype, s < 5 && (s > 3 || !b) && M(o, r));
+  Y(o, r);
+  for (var c = n.length - 1; c >= 0; c--)
+    h = U(s, r, d = {}, e[3], m), i = (0, n[c])(o, h), d._ = 1, T(i) && (o = i);
+  return G(e, o), l && g(o, r, l), b ? s ^ 4 ? a : l : o;
+}, P, _, E;
+P = [$("nte-navbar")];
+const f = class f extends (E = k({})) {
+  constructor() {
+    super(...arguments), this.scrollThreshold = 1, this.styleObserver = new MutationObserver(() => this.refreshComponentStyle()), this._onScroll = () => this.updateScrollState(), this._onSlotChange = () => this.updateScrollState();
+  }
+  static get is() {
+    return "nte-navbar";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.styleObserver.observe(this, { attributes: !0, attributeFilter: ["class", "style"] }), window.addEventListener("scroll", this._onScroll, { passive: !0 }), this.refreshComponentStyle();
+  }
+  disconnectedCallback() {
+    this.styleObserver.disconnect(), window.removeEventListener("scroll", this._onScroll), super.disconnectedCallback();
+  }
+  refreshComponentStyle() {
+    const t = this.getComponentStyle();
+    this.scrollThreshold = t.scrollThreshold, this.updateScrollState();
+  }
+  getComponentStyle() {
+    const r = getComputedStyle(this).getPropertyValue("--nte-navbar-scroll-threshold").trim(), n = Number.parseFloat(r);
+    return {
+      scrollThreshold: Number.isFinite(n) ? Math.max(0, n) : 1
+    };
+  }
+  updateScrollState() {
+    const t = Math.max(0, window.scrollY), r = t > 0, n = t > this.scrollThreshold;
+    this.classList.toggle("is-scrolled", r), this.classList.toggle("is-below-threshold", n), this.syncLineScrollState(r, n);
+  }
+  syncLineScrollState(t, r) {
+    for (const n of Array.from(this.querySelectorAll("nte-navbar-line")))
+      n.classList.toggle("is-navbar-scrolled", t), n.classList.toggle("is-navbar-below-threshold", r);
+  }
+  render() {
+    return z`<div id="navbar" part="navbar"><slot @slotchange=${this._onSlotChange}></slot></div>`;
+  }
+};
+f.styles = [S(N)];
+let p = f;
+_ = q(E);
+p = J(_, 0, "NteNavbar", P, p);
+H(_, 1, p);
+const K = "*,*: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}dialog{color:inherit;background:transparent;border:none}a,i{color:inherit;text-decoration:none}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}slot{display:contents}:host{--height: auto;--height-scrolled: var(--height);--background: transparent;--text-color: var(--nt-text);display:block;position:relative;isolation:isolate;width:100%;block-size:var(--height);max-block-size:var(--height);min-block-size:0;overflow:clip;color:var(--text-color);background:var(--background);transition:block-size .2s ease-in-out,max-block-size .2s ease-in-out,opacity .2s ease-in-out}:host(.with-shrink-on-scroll){max-block-size:var(--height)}:host(.is-navbar-below-threshold.with-shrink-on-scroll){block-size:var(--height-scrolled);max-block-size:var(--height-scrolled)}:host(.with-collapse-on-scroll),:host(.hide-on-scroll){max-block-size:var(--height)}:host(.is-navbar-below-threshold.with-collapse-on-scroll),:host(.is-navbar-below-threshold.hide-on-scroll){block-size:0;max-block-size:0;opacity:0}#line{width:100%;block-size:100%;min-block-size:0}#container{width:min(100%,var(--container-width, var(--nt-container-width, 100%)));block-size:100%;min-block-size:0;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}.region{min-width:0;min-block-size:0;block-size:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.region ::slotted(*){min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}#start{justify-content:flex-start}#center{justify-content:center;justify-self:center}#end{justify-content:flex-end}#container:has(>#center>slot.slot-empty){display:flex;justify-content:space-between}#container:has(>#center>slot.slot-empty) #start,#container:has(>#center>slot.slot-empty) #end{flex:0 1 auto}#container:has(>#center>slot.slot-empty) #center{display:none}.region:has(>slot.slot-empty){visibility:hidden;pointer-events:none}";
+var Q = Object.create, w = Object.defineProperty, R = Object.getOwnPropertyDescriptor, L = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), j = (e) => {
+  throw TypeError(e);
+}, W = (e, t, r) => t in e ? w(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, X = (e, t) => w(e, "name", { value: t, configurable: !0 }), Z = (e) => [, , , Q((e == null ? void 0 : e[L("metadata")]) ?? null)], ee = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], F = (e) => e !== void 0 && typeof e != "function" ? j("Function expected") : e, te = (e, t, r, n, o) => ({ kind: ee[e], name: t, metadata: n, addInitializer: (a) => r._ ? j("Already initialized") : o.push(F(a || null)) }), oe = (e, t) => W(t, L("metadata"), e[3]), re = (e, t, r, n) => {
+  for (var o = 0, a = e[t >> 1], i = a && a.length; o < i; o++) a[o].call(r);
+  return n;
+}, ne = (e, t, r, n, o, a) => {
+  var i, d, h, s = t & 7, b = !1, v = 0, m = e[v] || (e[v] = []), l = s && (o = o.prototype, s < 5 && (s > 3 || !b) && R(o, r));
+  X(o, r);
+  for (var c = n.length - 1; c >= 0; c--)
+    h = te(s, r, d = {}, e[3], m), i = (0, n[c])(o, h), d._ = 1, F(i) && (o = i);
+  return oe(e, o), l && w(o, r, l), b ? s ^ 4 ? a : l : o;
+}, D, y, I;
+D = [$("nte-navbar-line")];
+const x = class x extends (I = k({ slotVisibility: !0 })) {
+  static get is() {
+    return "nte-navbar-line";
+  }
+  render() {
+    return z`
+      <div id="line" part="line">
+        <div id="container" part="container">
+          <div id="start" class="region" part="start"><slot name="start"></slot></div>
+          <div id="center" class="region" part="center"><slot name="center"></slot></div>
+          <div id="end" class="region" part="end"><slot name="end"></slot></div>
+        </div>
+      </div>
+      <!-- Der Default-Slot bleibt als sichtbarer Diagnose-Fallback bestehen; Inhalte darin zeigen einen falschen Slot-Namen an. -->
+      <slot NO-DEFAULT-SLOT></slot>
+    `;
+  }
+};
+x.styles = [S(K)];
+let u = x;
+y = Z(I);
+u = ne(y, 0, "NteNavbarLine", D, u);
+re(y, 1, u);
+export {
+  p as NteNavbar,
+  u as NteNavbarLine
+};

package/index.scss

@@ -0,0 +1,2 @@
+@forward 'src/scss/default-style';
+@forward 'src/scss/with-btn-compat';

package/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@nextrap/nte-navbar",
+    "version": "1.0.0",
+    "files": [
+        "*.*",
+        "src",
+        "demo"
+    ],
+    "main": "./index.js",
+    "repository": {
+        "directory": "nextrap-elements/nte-navbar",
+        "type": "git",
+        "url": "https://github.com/nextrap/nextrap-monorepo"
+    },
+    "dependencies": {
+        "@nextrap/nt-core": "^2.0.0",
+        "@nextrap/style-reset": "^2.0.0",
+        "lit": "^3.3.1",
+        "@nextrap/nte-nav": "^2.0.0"
+    },
+    "devDependencies": {
+        "@nextrap/nte-burger": "^2.0.0",
+        "@nextrap/nte-nav": "^1.0.0",
+        "@nextrap/nte-offcanvas": "^2.0.0",
+        "@trunkjs/element-relocator": "^1.0.1",
+        "@trunkjs/responsive": "^1.0.11"
+    },
+    "type": "module",
+    "types": "./index.d.ts"
+}

package/src/components/nte-navbar/nte-navbar.d.ts

@@ -0,0 +1,22 @@
+declare const NteNavbar_base: import('@nextrap/nt-core').InternalNextrapElementType;
+export declare class NteNavbar extends NteNavbar_base {
+    static get is(): string;
+    static styles: import('lit').CSSResult[];
+    private scrollThreshold;
+    private readonly styleObserver;
+    private readonly _onScroll;
+    private readonly _onSlotChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    refreshComponentStyle(): void;
+    private getComponentStyle;
+    private updateScrollState;
+    private syncLineScrollState;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nte-navbar': NteNavbar;
+    }
+}
+export {};

package/src/components/nte-navbar/nte-navbar.scss

@@ -0,0 +1,43 @@
+@use '@nextrap/style-reset' as reset;
+
+@include reset.reset();
+
+:host {
+  --container-width: var(--nt-container-width, 100%);
+  --nte-navbar-position: static;
+  --nte-navbar-scroll-threshold: 1;
+  --nte-navbar-top: 0;
+  --nte-navbar-background: Canvas;
+  --nte-navbar-background-at-top: var(--nte-navbar-background);
+  --nte-navbar-shadow: 0 0.25rem 1rem color-mix(in srgb, currentColor 12%, transparent);
+  --nte-navbar-overlay-offset: 0px;
+  display: block;
+  position: var(--nte-navbar-position);
+  inset-block-start: var(--nte-navbar-top);
+  z-index: var(--nt-navbar-z-index, 10);
+  width: 100%;
+  background: var(--nte-navbar-background);
+  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+:host(.with-shadow) {
+  box-shadow: var(--nte-navbar-shadow);
+}
+
+:host(.with-shadow-on-scroll.is-below-threshold) {
+  box-shadow: var(--nte-navbar-shadow);
+}
+
+:host(.with-transparent-at-top:not(.is-below-threshold)) {
+  background: transparent;
+  box-shadow: none;
+}
+
+:host(.with-overlay-at-top:not(.is-below-threshold)) {
+  margin-block-end: calc(-1 * var(--nte-navbar-overlay-offset));
+}
+
+#navbar {
+  display: block;
+  width: 100%;
+}

package/src/components/nte-navbar-line/nte-navbar-line.d.ts

@@ -0,0 +1,12 @@
+declare const NteNavbarLine_base: import('@nextrap/nt-core').InternalNextrapElementType;
+export declare class NteNavbarLine extends NteNavbarLine_base {
+    static get is(): string;
+    static styles: import('lit').CSSResult[];
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nte-navbar-line': NteNavbarLine;
+    }
+}
+export {};

package/src/components/nte-navbar-line/nte-navbar-line.scss

@@ -0,0 +1,112 @@
+@use '@nextrap/style-reset' as reset;
+
+@include reset.reset();
+
+:host {
+  --height: auto;
+  --height-scrolled: var(--height);
+  --background: transparent;
+  --text-color: var(--nt-text);
+  display: block;
+  position: relative;
+  isolation: isolate;
+  width: 100%;
+  block-size: var(--height);
+  max-block-size: var(--height);
+  min-block-size: 0;
+  overflow: clip;
+  color: var(--text-color);
+  background: var(--background);
+  transition:
+    block-size 0.2s ease-in-out,
+    max-block-size 0.2s ease-in-out,
+    opacity 0.2s ease-in-out;
+}
+
+:host(.with-shrink-on-scroll) {
+  max-block-size: var(--height);
+}
+
+:host(.is-navbar-below-threshold.with-shrink-on-scroll) {
+  block-size: var(--height-scrolled);
+  max-block-size: var(--height-scrolled);
+}
+
+:host(.with-collapse-on-scroll),
+:host(.hide-on-scroll) {
+  max-block-size: var(--height);
+}
+
+// Collapses opt-in lines when the navbar propagates its configured scroll threshold state.
+:host(.is-navbar-below-threshold.with-collapse-on-scroll),
+:host(.is-navbar-below-threshold.hide-on-scroll) {
+  block-size: 0;
+  max-block-size: 0;
+  opacity: 0;
+}
+
+#line {
+  width: 100%;
+  block-size: 100%;
+  min-block-size: 0;
+}
+
+#container {
+  width: min(100%, var(--container-width, var(--nt-container-width, 100%)));
+  block-size: 100%;
+  min-block-size: 0;
+  margin-inline: auto;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+}
+
+.region {
+  min-width: 0;
+  min-block-size: 0;
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.region ::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#start {
+  justify-content: flex-start;
+}
+
+#center {
+  justify-content: center;
+  justify-self: center;
+}
+
+#end {
+  justify-content: flex-end;
+}
+
+#container:has(> #center > slot.slot-empty) {
+  display: flex;
+  justify-content: space-between;
+}
+
+#container:has(> #center > slot.slot-empty) #start,
+#container:has(> #center > slot.slot-empty) #end {
+  flex: 0 1 auto;
+}
+
+#container:has(> #center > slot.slot-empty) #center {
+  display: none;
+}
+
+.region:has(> slot.slot-empty) {
+  visibility: hidden;
+  pointer-events: none;
+}

package/src/scss/default-style.scss

@@ -0,0 +1,105 @@
+@use 'with-btn-compat' as btn-compat;
+
+// Provides the reusable public default styling mixin for navbar state and utility classes.
+@mixin default-style() {
+  // Keeps legacy button controls from touching the navbar line edges.
+  @include btn-compat.with-btn-compat();
+
+  // Animates optional navbar-line size and position changes from public light-DOM state classes.
+  nte-navbar-line.with-collapse-on-scroll,
+  nte-navbar-line.hide-on-scroll {
+    transition:
+      block-size 0.2s ease-in-out,
+      max-block-size 0.2s ease-in-out,
+      opacity 0.2s ease-in-out,
+      transform 0.2s ease-in-out;
+  }
+
+  // Slides and collapses the opt-in top line when the parent navbar is scrolled.
+  nte-navbar.is-scrolled > nte-navbar-line.with-collapse-on-scroll {
+    block-size: 0;
+    max-block-size: 0;
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+
+  // Hides compatibility lines after the configured navbar threshold.
+  nte-navbar.is-below-threshold > nte-navbar-line.hide-on-scroll {
+    block-size: 0;
+    max-block-size: 0;
+    opacity: 0;
+  }
+
+  // Aligns the brand logo and its dimensions within a navbar line.
+  .brand-logo {
+    --nt-navbar-brand-logo-aspect-ratio: 3 / 1;
+
+    position: relative;
+    z-index: var(--nt-navbar-content-z-index, 1);
+    display: flex;
+    align-items: center;
+    block-size: 100%;
+    // Safari braucht eine definite Inline-Größe, damit der Flex-Brand-Bereich nicht auf 0px kollabiert.
+    inline-size: 200px;
+    max-inline-size: 100%;
+    aspect-ratio: var(--nt-navbar-brand-logo-aspect-ratio);
+    transition:
+      inline-size 0.2s ease-in-out,
+      block-size 0.2s ease-in-out,
+      max-inline-size 0.2s ease-in-out;
+  }
+
+  .brand-logo[slot='start'] {
+    justify-content: flex-start;
+    margin-inline-end: auto;
+  }
+
+  .brand-logo[slot='center'] {
+    justify-content: center;
+    margin-inline: auto;
+  }
+
+  .brand-logo[slot='end'] {
+    justify-content: flex-end;
+    margin-inline-start: auto;
+  }
+
+  // Reserves an inner focus frame so the indicator remains visible at clipped container edges.
+  .brand-logo {
+    box-sizing: border-box;
+    border: 2px solid transparent;
+  }
+
+  .brand-logo:focus-visible {
+    border-color: var(--nt-primary, #0d6efd);
+    outline: 0;
+  }
+
+  .brand-logo > img {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    max-inline-size: 100%;
+    max-block-size: 100%;
+    object-fit: contain;
+    object-position: center;
+    transition:
+      inline-size 0.2s ease-in-out,
+      block-size 0.2s ease-in-out;
+  }
+
+  .brand-logo[slot='start'] > img {
+    object-position: left center;
+  }
+
+  .brand-logo[slot='end'] > img {
+    object-position: right center;
+  }
+
+  .navbar-control {
+    position: relative;
+    z-index: var(--nt-navbar-control-z-index, 2);
+    min-inline-size: 0;
+    pointer-events: auto;
+  }
+}

package/src/scss/with-btn-compat.scss

@@ -0,0 +1,18 @@
+// Adds the outer spacing required by legacy .btn controls placed directly in a navbar line.
+@mixin with-btn-compat($margin: var(--nt-space-1)) {
+  // Fits the button into the line's content height while preserving the configured outer spacing.
+  nte-navbar-line :where(.btn, .btn-group) {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    block-size: calc(100% - (2 * #{$margin}));
+    min-block-size: 0;
+    margin: $margin;
+  }
+
+  // Lets grouped buttons share the compatibility height without multiplying the outer margin.
+  nte-navbar-line :where(.btn-group) > .btn {
+    block-size: 100%;
+    margin: 0;
+  }
+}