@nextrap/ntl-2col 0.1.4 → 2.0.0

package/index.scss

@@ -0,0 +1,11 @@
+@forward 'src/scss/default-style';
+@forward 'src/scss/with-alternating';
+@forward 'src/scss/with-background-and-divider';
+@forward 'src/scss/with-breakout-end';
+@forward 'src/scss/with-breakout-start';
+@forward 'src/scss/with-image-auto-objectfit';
+@forward 'src/scss/with-justify';
+@forward 'src/scss/with-main-sticky-top';
+@forward 'src/scss/with-modifier-classes';
+@forward 'src/scss/with-reverse';
+@forward 'src/scss/with-wrapper-bg-color';

package/package.json

@@ -1,8 +1,21 @@
 {
     "name": "@nextrap/ntl-2col",
-    "version": "0.1.4",
+    "version": "2.0.0",
+    "files": [
+        "*.*",
+        "src",
+        ".agents"
+    ],
     "main": "./index.js",
-    "dependencies": {},
+    "repository": {
+        "directory": "nextrap-layout/ntl-2col",
+        "type": "git",
+        "url": "https://github.com/nextrap/nextrap-monorepo"
+    },
+    "dependencies": {
+        "@nextrap/nt-core": "^2.0.0"
+    },
     "type": "module",
-    "types": "./index.d.ts"
+    "types": "./index.d.ts",
+    "web-types": "./web-types.json"
 }

package/src/components/ntl-2col/ntl-2col.d.ts

@@ -0,0 +1,7 @@
+declare const Ntl2Col_base: import('@nextrap/nt-core').InternalNextrapElementType;
+export declare class Ntl2Col extends Ntl2Col_base {
+    static styles: import('lit').CSSResult[];
+    connectedCallback(): void;
+    protected render(): unknown;
+}
+export {};

package/src/components/ntl-2col/ntl-2col.scss

@@ -0,0 +1,133 @@
+:host {
+  --gap: var(--nt-spacing-layout);
+  --container-width: var(--nt-container-width, 100%);
+  --inner-padding: var(--nt-space-3);
+  --section-bg: transparent; // The main background
+
+  --cols: 6;
+  --breakpoint: md;
+
+  background: var(--section-bg);
+  display: block;
+}
+
+#container {
+  margin-left: var(--container-margin-left, auto);
+  margin-right: var(--container-margin-right, auto);
+  width: var(--container-render-width, var(--container-width));
+
+  box-sizing: border-box;
+}
+
+#wrapper {
+  box-sizing: border-box;
+  --aside-width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  align-items: stretch;
+}
+
+#header,
+#footer,
+#top,
+#bottom {
+  width: 100%;
+  box-sizing: border-box;
+
+  &:has(.slot-empty) {
+    display: none;
+  }
+}
+
+#top {
+  order: 0;
+  flex: 0 0 auto;
+}
+
+#main {
+  box-sizing: border-box;
+  order: 1;
+  min-width: 0;
+}
+
+#aside {
+  box-sizing: border-box;
+  order: 2;
+  min-width: 0;
+}
+
+#bottom {
+  order: 3;
+  flex: 0 0 auto;
+}
+
+:host([mode='mobile']) {
+  #container {
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+
+  // Ensures both mobile content regions always span the complete available width.
+  #main,
+  #aside {
+    width: 100%;
+    flex: 0 0 100%;
+  }
+}
+
+:host([mode='mobile'].mobile-reverse) {
+  #aside {
+    order: 1;
+  }
+
+  #main {
+    order: 2;
+  }
+}
+
+:host([mode='desktop'].desktop-reverse) {
+  #wrapper {
+    flex-direction: row-reverse;
+  }
+}
+
+:host([mode='desktop']) {
+  #wrapper {
+    flex-direction: row;
+    --main-width: calc(100% * var(--cols, 1) / 12);
+    &:has(#aside > .slot-empty) {
+      flex-direction: column;
+
+      #main {
+        width: 100%;
+        flex-basis: 100%;
+      }
+    }
+    #main {
+      width: var(--main-width);
+      flex: 0 0 var(--main-width);
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+    }
+    #aside {
+      flex: 1 1 0;
+      box-sizing: border-box;
+    }
+  }
+
+  #aside {
+    width: auto;
+    min-width: 0;
+    flex: 1 1 0;
+    box-sizing: border-box;
+
+    &:has(.slot-empty) {
+      display: none;
+    }
+  }
+}

package/src/scss/_default-style.scss

@@ -0,0 +1,78 @@
+@use 'with-image-auto-objectfit' as image-auto-objectfit;
+@use 'with-justify' as justify;
+@use 'with-modifier-classes' as modifier-classes;
+@use 'with-wrapper-bg-color' as wrapper-bg;
+
+@mixin default-style(
+  $innerPadding: var(--nt-space-3),
+  $gap: var(--nt-spacing-layout),
+  $background: transparent,
+  $border: 1px solid var(--nt-dark),
+  $border-radius: var(--nt-border-radius),
+  $objectFit: cover,
+  $aspectRatio: none,
+  $modifierClasses: true,
+  $wrapper-bg-color: transparent,
+  $justify: center
+) {
+  --background: #{$background};
+  --border: #{$border};
+  --border-radius: #{$border-radius};
+  --inner-padding: #{$innerPadding};
+  --gap: #{$gap};
+
+  @include wrapper-bg.with-wrapper-bg-color($wrapper-bg-color);
+
+  @if ($justify != none) {
+    @include justify.with-justify($justify);
+  }
+
+  @if ($aspectRatio != none) {
+    --aspectRatio: #{$aspectRatio};
+    &::part(aside) {
+      aspect-ratio: #{$aspectRatio};
+    }
+  }
+
+  @if ($objectFit != none) {
+    // Object-Fit für Bilder, die automatisch in den Aside Bereich geladen werden
+
+    @include image-auto-objectfit.with-image-auto-objectfit($objectFit);
+  }
+
+  @if ($modifierClasses != false and $modifierClasses != none) {
+    @include modifier-classes.with-modifier-classes();
+  }
+
+  // Getestete, verbindliche Abstandslogik: Der innere Padding-Wert ist der gemeinsame Gap für alle Regionen. Nicht ändern, ohne alle Slot-Kombinationen erneut zu prüfen.
+  &::part(wrapper) {
+    border: var(--border);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    gap: var(--inner-padding);
+  }
+
+  // Getestete, verbindliche Main-Abstände: nur horizontales Padding, weil die vertikale Trennung über den gemeinsamen Gap erfolgt. Nicht ändern, ohne alle Slot-Kombinationen erneut zu prüfen.
+  &::part(main) {
+    padding-inline: var(--inner-padding);
+  }
+
+  // Getestete, verbindliche Top-Abstände: der äußere vertikale Rand bleibt, die innere Kante nutzt den gemeinsamen Gap. Nicht ändern, ohne alle Slot-Kombinationen erneut zu prüfen.
+  &::part(top) {
+    padding: var(--inner-padding);
+    padding-block-end: 0;
+  }
+
+  // Getestete, verbindliche Bottom-Abstände: der äußere vertikale Rand bleibt, die innere Kante nutzt den gemeinsamen Gap. Nicht ändern, ohne alle Slot-Kombinationen erneut zu prüfen.
+  &::part(bottom) {
+    padding: var(--inner-padding);
+    padding-block-start: 0;
+  }
+
+  // Fügt dem Aside-Bereich nur bei explizit zugewiesenen Aside-Inhalten Innenabstand hinzu.
+  &:has(.aside:not(.p-0)) {
+    &::part(aside) {
+      padding-inline: var(--inner-padding);
+    }
+  }
+}

package/src/scss/_with-alternating.scss

@@ -0,0 +1,10 @@
+@mixin with-alternating {
+  &[mode='desktop']:nth-of-type(even) {
+    &::part(main) {
+      order: 2;
+    }
+    &::part(aside) {
+      order: 1;
+    }
+  }
+}

package/src/scss/_with-background-and-divider.scss

@@ -0,0 +1,25 @@
+@mixin with-background-and-divider($gap: 2rem, $background: var(--nt-primary), $divider-color: var(--nt-light)) {
+  --section-bg: #{$background};
+  --border: none;
+  --gap: #{$gap};
+
+  &[mode='desktop'] {
+    &::part(aside) {
+      position: relative;
+    }
+
+    &::part(aside)::after {
+      content: '';
+      position: absolute;
+      top: 25%;
+      bottom: 25%;
+      left: calc(var(--gap) / -2);
+      border-left: 1px solid #{$divider-color};
+    }
+
+    &.desktop-reverse::part(aside)::after {
+      right: calc(var(--gap) / -2);
+      left: auto;
+    }
+  }
+}

package/src/scss/_with-breakout-end.scss

@@ -0,0 +1,28 @@
+@mixin with-breakout-end {
+  &[mode='mobile'] {
+  }
+
+  &[mode='desktop'] {
+    --breakout-container-width: var(--container-width, var(--nt-container-width, 100%));
+    --breakout-space: max(0px, calc((100vw - var(--breakout-container-width)) / 2));
+    --container-render-width: calc(var(--breakout-container-width) + var(--breakout-space));
+    --container-margin-left: auto;
+    --container-margin-right: 0;
+
+    &::part(header),
+    &::part(footer) {
+      width: var(--breakout-container-width);
+      box-sizing: border-box;
+    }
+
+    &::part(main) {
+      width: calc(var(--breakout-container-width) * var(--cols) / 12);
+      flex-basis: calc(var(--breakout-container-width) * var(--cols) / 12);
+    }
+
+    &::part(aside) {
+      width: auto;
+      flex: 1 1 0;
+    }
+  }
+}

package/src/scss/_with-breakout-start.scss

@@ -0,0 +1,30 @@
+@mixin with-breakout-start {
+  &[mode='desktop'] {
+    --breakout-container-width: var(--container-width, var(--nt-container-width, 100%));
+    --breakout-space: max(0px, calc((100vw - var(--breakout-container-width)) / 2));
+    --container-render-width: calc(var(--breakout-container-width) + var(--breakout-space));
+    --container-margin-left: 0;
+    --container-margin-right: auto;
+
+    &::part(header),
+    &::part(footer) {
+      width: var(--breakout-container-width);
+      margin-left: auto;
+      box-sizing: border-box;
+    }
+
+    &::part(wrapper) {
+      flex-direction: row-reverse;
+    }
+
+    &::part(main) {
+      width: calc(var(--breakout-container-width) * var(--cols) / 12);
+      flex-basis: calc(var(--breakout-container-width) * var(--cols) / 12);
+    }
+
+    &::part(aside) {
+      width: auto;
+      flex: 1 1 0;
+    }
+  }
+}

package/src/scss/_with-image-auto-objectfit.scss

@@ -0,0 +1,28 @@
+@mixin with-image-auto-objectfit($objectFit: cover) {
+  &:has(> p[slot='aside'].auto)::part(aside) {
+    padding: 0; // remove padding for auto aside
+  }
+
+  p[slot='aside'].auto {
+    height: 100%;
+    width: 100%;
+    display: block;
+    & > img {
+      width: 100%;
+      height: 100%;
+      object-fit: #{$objectFit};
+      object-position: center center;
+    }
+  }
+
+  &[mode='mobile']:has(> p[slot='aside'].auto) {
+    // Always set the image top
+    &::part(main) {
+      order: 2;
+    }
+
+    &::part(aside) {
+      order: 1;
+    }
+  }
+}

package/src/scss/_with-justify.scss

@@ -0,0 +1,10 @@
+@mixin with-justify($justify: center) {
+  &[mode='desktop'] {
+    &::part(main),
+    &::part(aside) {
+      display: flex;
+      flex-direction: column;
+      justify-content: $justify;
+    }
+  }
+}

package/src/scss/_with-main-sticky-top.scss

@@ -0,0 +1,13 @@
+@mixin with-main-sticky-top($top: var(--main-sticky-top, var(--nt-spacing-layout))) {
+  &[mode='desktop'] {
+    &::part(wrapper) {
+      overflow: clip;
+    }
+
+    &::part(main) {
+      position: sticky;
+      top: $top;
+      align-self: flex-start;
+    }
+  }
+}

package/src/scss/_with-modifier-classes.scss

@@ -0,0 +1,52 @@
+@use 'with-breakout-end' as breakout-end;
+@use 'with-breakout-start' as breakout-start;
+@use 'with-justify' as justify;
+@use 'with-main-sticky-top' as main-sticky-top;
+
+@mixin with-modifier-classes {
+  &.reverse {
+    &[mode='mobile'] {
+      &::part(aside) {
+        order: 1;
+      }
+
+      &::part(main) {
+        order: 2;
+      }
+    }
+
+    &[mode='desktop']::part(wrapper) {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &.reverse-desktop {
+    &[mode='desktop']::part(wrapper) {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &.breakout-start {
+    @include breakout-start.with-breakout-start;
+  }
+
+  &.breakout-end {
+    @include breakout-end.with-breakout-end;
+  }
+
+  &.with-justify-top {
+    @include justify.with-justify(flex-start);
+  }
+
+  &.with-justify-center {
+    @include justify.with-justify(center);
+  }
+
+  &.with-justify-bottom {
+    @include justify.with-justify(flex-end);
+  }
+
+  &.with-main-sticky-top {
+    @include main-sticky-top.with-main-sticky-top();
+  }
+}

package/src/scss/_with-reverse.scss

@@ -0,0 +1,5 @@
+@mixin with-reverse {
+  &::part(wrapper) {
+    flex-direction: row-reverse;
+  }
+}

package/src/scss/_with-wrapper-bg-color.scss

@@ -0,0 +1,5 @@
+@mixin with-wrapper-bg-color($background: transparent) {
+  &::part(wrapper) {
+    background: #{$background};
+  }
+}