@nextrap/ntl-hero 2.0.0

package/README.md

@@ -0,0 +1,205 @@
+# ntl-hero
+
+A layout-focused hero web component with support for:
+
+- a **background layer** (e.g. parallax image),
+- a **top navigation bar**,
+- **centered headline/content**, and
+- a **framed slider card** that is bottom‑aligned and can visually overlap the page below.
+
+It is implemented with Lit and the Shadow DOM, and is designed to be reusable across different hero designs by composing content via slots and CSS custom properties.
+
+## Features
+
+- **Slot-based architecture**: `nav`, `bg`, default, and `slider` slots for flexible composition.
+- **Layered layout**: Background, content, and slider are stacked with proper z‑index handling.
+- **Viewport-aware height**: Defaults to `100vh` and can be reduced via a height offset.
+- **Themed via CSS variables**: Adjust spacing, radii, heights, and offsets without touching the component code.
+- **Responsive**: Adapts padding and slider sizing on smaller screens.
+
+## Slots
+
+| Slot name   | Required | Description                                                                              | Typical content                      |
+| ----------- | -------- | ---------------------------------------------------------------------------------------- | ------------------------------------ |
+| `nav`       | no       | Navigation bar at the very top of the hero.                                              | Navigation component, logo + menu    |
+| `bg`        | no       | Background layer behind everything else. If omitted, the hero falls back to `--nt-body`. | `nte-parallax-bg`, decorative images |
+| _(default)_ | no       | Main hero content, centered between nav and slider.                                      | Headings, copy, buttons, badges      |
+| `slider`    | no       | Slider/card content in the framed area at the bottom of the hero.                        | Carousel / slideshow components      |
+
+> The component is resilient: you can use just a background + content, content + slider, or all four slots together.
+
+## Layout behavior
+
+- The hero height is `min-height: calc(100vh - var(--ntl-hero-height-offset))`, so by default it fills the viewport.
+- The **nav** (if present) sits at the top, the **slider** is bottom‑aligned, and the **content** is vertically centered in the remaining space between them.
+- The slider is wrapped in a **card frame** with its own background and border radius; it can be moved further down using `--ntl-hero-slider-offset` so that it visually overlaps the section that follows.
+- If no `bg` slot is provided, the hero uses `--nt-body` (or `--ntl-hero-bg-color`) as its background color.
+
+## Example: Hero with nav, parallax background, centered content and slider
+
+```html
+<ntl-hero
+    style="
+    --ntl-hero-height-offset: 10vh;
+    --ntl-hero-bg-color: #E4E6EF;
+    --ntl-hero-slider-offset: 3rem;
+  "
+>
+    <!-- Top navigation bar -->
+    <div slot="nav">
+        <nte-nav
+            class="nav-horizontal"
+            mode="master"
+            data-group-name="nav1"
+            breakpoint="1008px"
+            transfer-to="#navSidebar"
+        >
+            <span slot="menu-text">Menü</span>
+            <ul>
+                <li><a href="#" class="active">Home</a></li>
+                <li><a href="#">Magazin</a></li>
+                <li><a href="#">Über uns</a></li>
+                <li><a href="#">Kontakt</a></li>
+            </ul>
+        </nte-nav>
+    </div>
+
+    <!-- Background layer (optional). If omitted, bg color comes from --ntl-hero-bg-color / --nt-body -->
+    <div slot="bg">
+        <nte-parallax-bg image="header-bg.svg"></nte-parallax-bg>
+    </div>
+
+    <!-- Centered hero text -->
+    <div>
+        <h6>
+            <span style="color: var(--nt-primary); text-transform: uppercase;">EPRAXIS.DIGITAL</span>
+            – DAS MAGAZIN FÜR DIE DIGITALISIERUNG IN DER GESUNDHEITSBRANCHE
+        </h6>
+        <h1>Digitale Transformation im Gesundheitswesen – verständlich, unabhängig, praxisnah.</h1>
+    </div>
+
+    <!-- Slider in framed card at the bottom -->
+    <div slot="slider">
+        <nte-image data-features="slideshow arrows indicators fullsize round-borders" interval="4000">
+            <img src="slide1.jpg" alt="Slide 1" />
+            <img src="slide2.jpg" alt="Slide 2" />
+            <img src="slide3.jpg" alt="Slide 3" />
+        </nte-image>
+    </div>
+</ntl-hero>
+```
+
+## Simpler variants
+
+### Only background + content
+
+```html
+<ntl-hero>
+    <nte-parallax-bg slot="bg" image="hero-background.jpg"></nte-parallax-bg>
+
+    <div>
+        <h1>Your Headline Here</h1>
+        <p>Your description text</p>
+    </div>
+</ntl-hero>
+```
+
+### Background + content + slider (no nav)
+
+```html
+<ntl-hero style="--ntl-hero-bg-color: #f0f0f5;">
+    <div slot="bg" style="background: #f0f0f5; width: 100%; height: 100%;"></div>
+
+    <div>
+        <h2>Digital Transformation</h2>
+        <p>Effizient, präzise, patientenorientiert</p>
+    </div>
+
+    <div slot="slider">
+        <!-- Your slider implementation -->
+    </div>
+</ntl-hero>
+```
+
+## CSS custom properties
+
+You can tune the layout and visual appearance using CSS variables on the host element:
+
+| Property                       | Default                              | Description                                                                       |
+| ------------------------------ | ------------------------------------ | --------------------------------------------------------------------------------- |
+| `--ntl-hero-bg-color`          | `var(--nt-body, #e4e6ef)`            | Background color when no `bg` slot content is provided.                           |
+| `--ntl-hero-max-height`        | `950px`                              | Maximum height of the hero container.                                             |
+| `--ntl-hero-shell-max-width`   | `1200px`                             | Max width of the inner shell (nav + content + slider).                            |
+| `--ntl-hero-content-max-width` | `940px`                              | Max width of the centered content block.                                          |
+| `--ntl-hero-slider-max-height` | `auto` (overridden in media queries) | Max height of the slider frame.                                                   |
+| `--ntl-hero-outer-radius`      | `30px`                               | Border radius of the outer slider wrapper/card.                                   |
+| `--ntl-hero-inner-radius`      | `20px`                               | Border radius of the inner slider frame.                                          |
+| `--ntl-hero-height-offset`     | `0px`                                | Value subtracted from `100vh` to reduce hero height (e.g. `80px`, `10vh`).        |
+| `--ntl-hero-slider-offset`     | `3rem`                               | Vertical translation applied to the slider card from its bottom‑aligned position. |
+| `--ntl-hero-padding-inline`    | `1.5rem`                             | Horizontal padding of the hero root.                                              |
+| `--ntl-hero-padding-top`       | `3rem`                               | Top padding of the hero root.                                                     |
+| `--ntl-hero-padding-bottom`    | `0rem`                               | Bottom padding of the hero root.                                                  |
+| `--ntl-hero-gap`               | `0rem`                               | Vertical gap between content and slider inside the shell.                         |
+
+Example customization:
+
+```css
+ntl-hero.hero-large {
+    --ntl-hero-height-offset: 8vh;
+    --ntl-hero-slider-offset: 4rem;
+    --ntl-hero-content-max-width: 880px;
+}
+```
+
+## Parts
+
+You can style internal parts using `::part()`:
+
+| Part           | Description                             |
+| -------------- | --------------------------------------- |
+| `section`      | Root `<section>` element of the hero    |
+| `nav`          | Wrapper around the navigation slot      |
+| `content`      | Wrapper around the default content slot |
+| `slider-frame` | Outer card frame around the slider      |
+| `slider`       | Inner slider container                  |
+
+```css
+ntl-hero::part(content) {
+    padding: 0 2rem;
+}
+
+ntl-hero::part(slider-frame) {
+    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
+}
+```
+
+## Styling slotted content
+
+Slotted elements (`nav`, `bg`, default, `slider`) are authored in the light DOM, so you can style them normally:
+
+```css
+.hero-heading h1 {
+    font-size: clamp(2.2rem, 3vw, 3.2rem);
+    margin-bottom: 0.75rem;
+}
+
+.hero-heading p {
+    margin: 0;
+    color: var(--nt-text-muted);
+}
+```
+
+## Browser support
+
+Works in all modern browsers that support:
+
+- Web Components
+- Shadow DOM
+- CSS Custom Properties
+
+## Accessibility
+
+- Ensure headings in the default slot follow a proper hierarchy (`<h1>`, `<h2>`, …).
+- Provide visible focus styles and appropriate ARIA labels inside the `nav` and `slider` content.
+- Ensure sufficient color contrast for text over images.
+- Provide `alt` text for all images in the `bg` and `slider` slots.

package/index.css

@@ -0,0 +1 @@
+ntl-hero p[slot=bg]{width:100%;height:100%;display:block}ntl-hero p[slot=bg]>img{width:100%;height:100%;object-position:center;object-fit:cover}

package/index.d.ts

@@ -0,0 +1 @@
+export * from './src/components/ntl-hero/ntl-hero';

package/index.js

@@ -0,0 +1,65 @@
+import { nextrap_element as z } from "@nextrap/nt-core";
+import { waitForReady as P } from "@trunkjs/browser-utils";
+import { unsafeCSS as g, html as O } from "lit";
+import { customElement as E } from "lit/decorators.js";
+import { resetStyle as j } from "@nextrap/style-reset";
+const F = ":host{--bg-color: var(--nt-body-teritary, #e4e6ef);--container-width: var(--nt-container-width, 100%);--height-offset: 0px;--min-height: 600px;--max-height: 1800px;--breakpoint: xl}#root{width:100%;isolation:isolate;min-height:var(--min-height);display:grid;position:relative;height:calc(100vh - var(--height-offset, 0px));max-height:var(--max-height);grid-template-rows:1fr;grid-template-columns:1fr}#wrapper{padding-top:var(--top-offset);width:var(--container-width);margin:0 auto;grid-row:1;grid-column:1;z-index:1;display:flex;flex-direction:column;align-items:center}#wrapper #title,#wrapper #top-title{text-align:center}#wrapper>#title,#wrapper #content{flex-grow:1;justify-content:center}#wrapper>*{display:flex;flex-direction:column;align-items:center}#wrapper>:has(.slot-empty){display:none!important}#background{position:absolute;background-color:var(--bg-color);z-index:0;height:100%;top:0;right:0;bottom:0;left:0}.background::slotted(*){pointer-events:auto}";
+var I = Object.create, c = Object.defineProperty, A = Object.getOwnPropertyDescriptor, x = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), w = (t) => {
+  throw TypeError(t);
+}, C = (t, e, o) => e in t ? c(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o, D = (t, e) => c(t, "name", { value: e, configurable: !0 }), T = (t) => [, , , I((t == null ? void 0 : t[x("metadata")]) ?? null)], B = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], y = (t) => t !== void 0 && typeof t != "function" ? w("Function expected") : t, L = (t, e, o, a, r) => ({ kind: B[t], name: e, metadata: a, addInitializer: (i) => o._ ? w("Already initialized") : r.push(y(i || null)) }), M = (t, e) => C(e, x("metadata"), t[3]), N = (t, e, o, a) => {
+  for (var r = 0, i = t[e >> 1], n = i && i.length; r < n; r++) i[r].call(o);
+  return a;
+}, R = (t, e, o, a, r, i) => {
+  var n, h, u, l = e & 7, f = !1, _ = 0, k = t[_] || (t[_] = []), d = l && (r = r.prototype, l < 5 && (l > 3 || !f) && A(r, o));
+  D(r, o);
+  for (var s = a.length - 1; s >= 0; s--)
+    u = L(l, o, h = {}, t[3], k), n = (0, a[s])(r, u), h._ = 1, y(n) && (r = n);
+  return M(t, r), d && c(r, o, d), f ? l ^ 4 ? i : d : r;
+}, b, v, S;
+const V = {
+  breakpoints: !0,
+  subLayoutApply: !0,
+  slotVisibility: !0,
+  eventBinding: !0
+};
+b = [E("ntl-hero")];
+const m = class m extends (S = z(V)) {
+  async updated(e) {
+    super.updated(e), await P(), this.style.setProperty("--height-offset", `${this.offsetTop}px`);
+  }
+  render() {
+    return O`
+      <div part="root" id="root">
+        <div id="background" part="background">
+          <slot name="bg"></slot>
+        </div>
+
+        <div id="wrapper" part="wrapper">
+          <div id="top-title" part="top-title">
+            <slot name="top-title"></slot>
+          </div>
+
+          <div id="title" part="title">
+            <slot name="title"></slot>
+          </div>
+
+          <div id="content" part="content">
+            <slot></slot>
+          </div>
+
+          <div id="footer" part="footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+m.styles = [g(F), g(j)];
+let p = m;
+v = T(S);
+p = R(v, 0, "NtlHero", b, p);
+N(v, 1, p);
+export {
+  p as NtlHero
+};

package/package.json

@@ -0,0 +1,22 @@
+{
+    "name": "@nextrap/ntl-hero",
+    "version": "2.0.0",
+    "main": "./index.js",
+    "repository": {
+        "directory": "nextrap-layout/ntl-hero",
+        "type": "git",
+        "url": "https://github.com/nextrap/nextrap-monorepo"
+    },
+    "dependencies": {
+        "@nextrap/style-reset": "^2.0.0",
+        "@trunkjs/browser-utils": "^1.0.28",
+        "lit": "^3.3.1"
+    },
+    "devDependencies": {
+        "@nextrap/style-base": "^2.0.0",
+        "@nextrap/style-utils": "^2.0.0"
+    },
+    "type": "module",
+    "types": "./index.d.ts",
+    "web-types": "./web-types.json"
+}

package/src/components/ntl-hero/ntl-hero.d.ts

@@ -0,0 +1,8 @@
+import { PropertyValues } from 'lit';
+declare const NtlHero_base: import('@nextrap/nt-core').InternalNextrapElementType;
+export declare class NtlHero extends NtlHero_base {
+    static styles: import('lit').CSSResult[];
+    protected updated(changedProperties: PropertyValues): Promise<void>;
+    protected render(): unknown;
+}
+export {};