@nextrap/ntl-2col 0.1.4 → 2.0.1

package/.agents/skills/ntl-2col-theming/SKILL.md

@@ -0,0 +1,101 @@
+---
+name: ntl-2col-theming
+description: Theme- und Component-Style-Klassen für @nextrap/ntl-2col entwickeln; beschreibt Parts, responsive Slot-Aufteilung und vorhandene SCSS-Mixins.
+---
+
+# NTL 2Col Theming
+
+Nutze diesen Skill für Theme-SCSS und neue visuelle Varianten. Für Markup und Content-Zuordnung nutze `ntl-2col-usage`.
+
+## Verbindlicher Slot-Vertrag
+
+Behalte beim Seaming standardmäßig die eingebaute Content-Zuordnung bei:
+
+- `main` enthält den Hauptinhalt.
+- `aside` enthält den Inhalt der zweiten Spalte.
+- `top` und `bottom` gehen innerhalb des `wrapper` über dessen volle Breite.
+- `header` und `footer` liegen außerhalb des `wrapper` und bleiben über die volle Containerbreite.
+- Verschiebe `header`, `wrapper` oder `footer` nicht per Grid oder Flex in nebeneinanderliegende Spalten.
+
+Soll nur eine Überschrift links beziehungsweise seitlich stehen, ordne sie `aside` zu und verwende die vorhandene `.reverse`- beziehungsweise `.reverse-desktop`-Funktion. Erstelle dafür keine eigene `style-header-left`-Variante. Weitere Inhalte derselben Seitenspalte werden ebenfalls `aside` zugeordnet; der Hauptinhalt bleibt dadurch unabhängig in `main` erweiterbar.
+
+Weiche von der Standardzuordnung nur für eine ausdrücklich verlangte, wiederverwendbare Sonderkomposition ab. Prüfe dabei immer die mobile Lesereihenfolge.
+
+Entwickler sagen teilweise `header` oder `footer`, meinen aber `top` oder `bottom`. Wenn Position oder Ebene nicht eindeutig ist, frage: „Meinst du `header`/`footer` außerhalb oder `top`/`bottom` innerhalb des Wrappers?“
+
+## Ausnahme: Content-Zuordnung im Theme überschreiben
+
+Die automatischen Selektoren der benannten Slots können über CSS-Variablen ersetzt werden. Verwende diese Möglichkeit ausschließlich für eine ausdrücklich freigegebene, wiederverwendbare Sonderkomposition. Hole vor jeder Nutzung die Erlaubnis des Users ein. Normale Content-Zuordnung, `.reverse`, `.reverse-desktop`, Parts und CSS-Layout haben Vorrang.
+
+| Zielbereich | Selektorvariable |
+|---|---|
+| `header` | `--ntl-2col-header-selector` |
+| `top` | `--ntl-2col-top-selector` |
+| `aside` | `--ntl-2col-aside-selector` |
+| `bottom` | `--ntl-2col-bottom-selector` |
+| `footer` | `--ntl-2col-footer-selector` |
+
+Der unbenannte `main`-Slot besitzt absichtlich keine Selektorvariable. Ein Variablenwert ist ein CSS-Selektor oder eine kommaseparierte Selektorliste und wird ohne Anführungszeichen gesetzt:
+
+```scss
+.page-special-composition ntl-2col {
+  --ntl-2col-top-selector: :scope > .header;
+}
+```
+
+Dieses Beispiel verschiebt direkte `.header`-Kinder in den inneren `top`-Bereich. Sobald der Variablenselektor Elemente findet, ersetzt er für den Zielbereich die eingebaute Zuordnung. Soll die eigene Auswahl die Standardauswahl ergänzen, muss der Standardselektor in einer kommaseparierten Liste enthalten sein, zum Beispiel `--ntl-2col-top-selector: :scope > .special-top, :scope > .top;`.
+
+Beachte bei jeder Freigabe:
+
+- Prüfe die semantische Rolle und die mobile Lesereihenfolge, nicht nur die Desktop-Position.
+- Vermeide Überschneidungen, bei denen dasselbe Light-DOM-Kind mehrere Selektorvariablen erfüllt.
+- Fehlerhafte Selektoren werden per `console.error` gemeldet. Nur die fehlerhafte Alternative wird übersprungen; weitere Alternativen, die Standardzuordnung und andere Slots werden weiterhin verarbeitet.
+- Die Selektoren werden beim ersten Update ausgewertet. Ein späteres Ändern der Variablen sortiert vorhandene Inhalte nicht erneut.
+- Die Funktion benötigt eine Version von `@trunkjs/content-pane`, die `@var(...)` in `data-query` unterstützt.
+
+## Theme-Regeln
+
+- Binde die vollständige Baseline an genau eine `style-*` Klasse, normalerweise mit `default-style()`.
+- Nutze vorhandene Mixins, bevor du eigenes `::part(...)`-Styling ergänzt.
+- Erzwinge in der gemeinsamen Standard-Baseline keine vertikale Zentrierung oder sonstige `justify`-Ausrichtung. Standardmäßig bleiben `main` und `aside` ohne zusätzliches Justify-Override; wenn eine Ausrichtung gewünscht ist, muss sie im Theme bewusst ergänzt werden – entweder direkt in der jeweiligen `style-*`-Variante oder ausdrücklich über eine Modifier-Class.
+- Wenn ein Theme eine eigene vertikale Ausrichtungslogik festlegt, wende sie innerhalb dieses Themes konsistent auf alle betroffenen `ntl-2col`-Varianten an statt nur auf einzelne Zufallsfälle.
+- Feature-Klassen beginnen mit `with-*`; jede Style-Variante beginnt mit `style-*` und enthält ihre vollständige Baseline.
+- Ändere Slot-Anordnung und Reihenfolge mit CSS, nicht mit TypeScript oder DOM-Umbauten.
+- Scope Desktop-Regeln auf `[mode='desktop']` und stelle im Mobile-Modus die richtige Lesereihenfolge sicher.
+- Definiere am `ntl-2col` keinen wiederkehrenden Abstand zu benachbarten Layouts und verlange dafür im Markup keine `py-*`, `my-*` oder `mt-*` Utilities. Dieser Content-Rhythmus gehört mit `--nt-spacing-section` in das umgebende Theme beziehungsweise den Content Container; die Komponente steuert nur interne Parts, Slots, Gaps und bewusst variant-spezifisches Padding.
+
+Erstelle keine zusätzliche `style-*`-Variante nur für konfigurierbare Eigenschaften:
+
+| Eigenschaft | Verwende stattdessen |
+|---|---|
+| Spaltenbreite | `--cols` pro Instanz, in Content Pane über `section-style` |
+| Abstand zu anderen Layouts | Theme-Content-Flow mit `--nt-spacing-section` |
+| Section-Fläche | `.surface-*` für Fläche und passende Textfarben; `.bg-*` für reinen Background |
+| Reverse oder Breakout | vorhandene Modifier wie `.reverse`, `.reverse-desktop`, `.breakout-start`, `.breakout-end` |
+| Vertikale Ausrichtung | nicht in die gemeinsame Standard-Baseline einbauen; nur bei Bedarf explizit im Theme setzen – bevorzugt direkt in der jeweiligen `style-*`-Variante über `::part(main)` und bei Bedarf `::part(aside)`, alternativ bewusst über eine Modifier-Class |
+| Sticky Main | `.with-main-sticky-top`; Offset über `--main-sticky-top` |
+| Wrapper-Background | `default-style($wrapper-bg-color: ...)` oder `with-wrapper-bg-color()` |
+| Border oder Radius | `default-style()`, eine dokumentierte Variable oder ein kombinierbarer `with-*`-Modifier |
+
+Eine weitere `style-*`-Variante ist nur gerechtfertigt, wenn sie eine vollständige, wiederverwendbare visuelle Baseline mit eigener Part-/Child-Darstellung und responsiver Komposition bildet, zum Beispiel ein echtes Hero-Layout. Eine einzelne Farbe, Breite oder Position genügt nicht.
+
+## Parts und Variablen
+
+Verfügbare Parts: `container`, `header`, `top`, `wrapper`, `main`, `aside`, `bottom`, `footer`.
+
+Wichtige Layoutvariablen: `--breakpoint`, `--cols`, `--container-width`, `--gap` und `--inner-padding`. Die Selektorvariablen sind keine normale Layoutkonfiguration; für sie gelten die Freigaberegeln im vorherigen Abschnitt.
+
+## Vorhandene Mixins
+
+| Mixin | Zweck |
+|---|---|
+| `default-style()` | Vollständige visuelle Baseline |
+| `with-reverse()` | `main` und `aside` umkehren |
+| `with-alternating()` | Aufeinanderfolgende Layouts alternieren |
+| `with-breakout-start()` / `with-breakout-end()` | Spalte zum Viewport-Rand erweitern |
+| `with-image-auto-objectfit()` | Automatische Aside-Bilder einpassen |
+| `with-justify($justify)` | vorhandenes Legacy-Mixin; nicht Teil der empfohlenen Standard-Baseline. Nur bewusst und explizit verwenden, wenn eine Modifier-Class oder eine projektweite Opt-in-Lösung gewünscht ist |
+| `with-main-sticky-top($top)` | Kurzen Main-Content auf Desktop im Viewport halten |
+| `with-background-and-divider()` | Hintergrund und Spaltentrenner |
+| `with-wrapper-bg-color()` | Wrapper-Hintergrund setzen |
+| `with-modifier-classes()` | Vorbereitete Modifier-Klassen registrieren |

package/.agents/skills/ntl-2col-theming/references/examples.md

@@ -0,0 +1,72 @@
+# NTL 2Col Theme-Beispiele
+
+Bereichsklassen wie `.aside` oder `.top` müssen am direkten Light-DOM-Kind von `ntl-2col` landen.
+
+## Standard
+
+```markdown
+## Behandlungsschwerpunkt
+{: layout="ntl-2col.style-focus" section-style="--cols: 8;"}
+
+Der Hauptinhalt bleibt in `main`.
+
+![Diagnostik](./diagnostik.jpg)
+```
+
+```scss
+@use '../../../../../../../../node_modules/@nextrap/ntl-2col/index' as twoCol;
+
+ntl-2col.style-focus {
+  @include twoCol.default-style();
+}
+```
+
+## Überschrift als linke Spalte
+
+Bevorzugt wird die Überschrift `aside` zugeordnet. `.reverse` setzt sie auf Desktop nach links und mobil vor `main`.
+
+```markdown
+## Behandlungsschwerpunkt
+{: layout="ntl-2col.style-heading-column.reverse" .aside section-style="--cols: 8;"}
+
+Der Hauptinhalt bleibt in `main`.
+```
+
+```scss
+ntl-2col.style-heading-column {
+  @include twoCol.default-style();
+}
+```
+
+## Ausnahme: `top` als linke Spalte
+
+Ein leeres `aside` setzt `main` intern auf volle Breite. Die Theme-Klasse muss deshalb die betroffenen Parts für Desktop überschreiben und mobil zurücksetzen.
+
+```markdown
+## Behandlungsschwerpunkt
+{: layout="ntl-2col.style-top-heading" .top section-style="--cols: 8;"}
+
+Der Hauptinhalt bleibt in `main`.
+```
+
+```scss
+ntl-2col.style-top-heading {
+  @include twoCol.default-style();
+
+  &[mode='desktop'] {
+    &::part(wrapper) { flex-direction: row; }
+    &::part(top) { order: 1; width: auto; flex: 1 1 0; }
+    &::part(main) {
+      order: 2;
+      width: calc(100% * var(--cols, 8) / 12);
+      flex: 0 0 calc(100% * var(--cols, 8) / 12);
+    }
+  }
+
+  &[mode='mobile'] {
+    &::part(wrapper) { flex-direction: column; }
+    &::part(top) { order: 1; width: 100%; flex: 0 0 auto; }
+    &::part(main) { order: 2; width: 100%; flex: 0 0 auto; }
+  }
+}
+```

package/.agents/skills/ntl-2col-usage/SKILL.md

@@ -0,0 +1,108 @@
+---
+name: ntl-2col-usage
+description: "@nextrap/ntl-2col korrekt importieren und in HTML oder trunkjs/content-pane Markdown mit den passenden Content-Bereichen verwenden."
+---
+
+# NTL 2Col Usage
+
+Nutze diesen Skill für Markup, Content-Zuordnung und Beispiele. Für Theme-SCSS nutze `ntl-2col-theming`.
+
+## Import
+
+```ts
+import '@nextrap/ntl-2col';
+```
+
+## Verbindliche Content-Zuordnung
+
+Ordne Inhalte zuerst nach ihrer Rolle zu. Eine gewünschte Position allein ist kein Grund, einen anderen Slot zu verwenden oder eine neue Style-Variante anzulegen.
+
+| Inhalt | Bereich |
+|---|---|
+| Haupttext und primärer Content | `main` |
+| Zweite Spalte, Bild oder seitlicher Zusatzinhalt | `aside` |
+| Volle Breite innerhalb des gerahmten Wrappers | `top` oder `bottom` |
+| Volle Breite außerhalb des Wrappers | `header` oder `footer` |
+
+- `main` und `aside` bilden im Desktop-Modus die beiden Spalten.
+- `top` und `bottom` liegen im `wrapper` und gehen dort über die volle Breite.
+- `header` und `footer` liegen außerhalb des `wrapper` und bleiben über die volle Containerbreite.
+- Direkte Light-DOM-Kinder mit `.header`, `.top`, `.aside`, `.bottom` oder `.footer` werden automatisch zugeordnet.
+- Direkte Bildabsätze können automatisch in `aside` verschoben werden.
+
+### Automatische Bildzuordnung
+
+Die Komponente ordnet jedes direkte `p:has(img)`-Kind automatisch dem `aside`-Slot zu und ergänzt daran die Klasse `.auto`. Ein normales Markdown-Bild wird als direkter Bildabsatz gerendert und landet deshalb standardmäßig in `aside`:
+
+```markdown
+## Behandlungsschwerpunkt
+{: layout="ntl-2col" section-style="--cols: 8;"}
+
+Der Text bleibt in `main`.
+
+![Diagnostik](./diagnostik.jpg)
+```
+
+Die Automatik greift nicht bei verschachtelten Bildabsätzen und nicht bei einem direkten `<img>` ohne umgebenden Absatz. Verwende dafür ein direktes Light-DOM-Kind mit `.aside` oder weise den `aside`-Slot ausdrücklich zu. Weitere direkte `.aside`-Kinder können Text, Bilder und andere Elemente derselben Seitenspalte aufnehmen.
+
+Bereichsklassen müssen am direkten Light-DOM-Kind von `ntl-2col` stehen. Verwende `header` nicht, um eine normale Überschrift lediglich als linke oder rechte Spalte zu positionieren. Ordne eine solche Überschrift `aside` zu und ändere ihre visuelle Position mit `.reverse` oder `.reverse-desktop`.
+
+Wenn ein Entwickler `header` oder `footer` sagt und die Ebene unklar ist, kläre, ob der äußere Bereich oder `top` beziehungsweise `bottom` im Wrapper gemeint ist.
+
+## Markdown-Beispiele
+
+Für besondere Slot-Anordnungen, insbesondere `top` als Desktop-Spalte, lies [references/examples.md](references/examples.md).
+
+Standard mit acht von zwölf Spalten für `main`:
+
+```markdown
+## Behandlungsschwerpunkt
+{: layout="ntl-2col" section-style="--cols: 8;"}
+
+Der Hauptinhalt bleibt in `main`.
+
+![Diagnostik](./diagnostik.jpg)
+```
+
+Überschrift als linke Spalte:
+
+```markdown
+## Behandlungsschwerpunkt
+{: layout="ntl-2col.reverse" .aside section-style="--cols: 8;"}
+
+Der Hauptinhalt bleibt in `main`.
+```
+
+`.reverse` stellt die Aside-Überschrift auf Desktop nach links und mobil vor den Hauptinhalt. Verwende `.reverse-desktop` nur, wenn der Aside-Inhalt mobil bewusst nach dem Hauptinhalt stehen soll.
+
+Weitere direkte Children mit `.aside` können dieselbe Seitenspalte ergänzen. Lege dafür keine positionsspezifische `style-*`-Variante an.
+
+## Vertikale Ausrichtung wählen
+
+`default-style()` zentriert auf Desktop die Inhalte von `main` und `aside`. Wähle Modifier nach dem tatsächlichen Höhenverhältnis:
+
+| Situation | Empfehlung |
+|---|---|
+| Beide Spalten sind ungefähr gleich hoch | Keinen Modifier setzen; die Default-Zentrierung reicht aus. |
+| Eine Spalte, häufig `aside`, ist deutlich länger | `.with-justify-top` setzt beide Inhalte an den oberen Rand und vermeidet eine große leere Fläche oberhalb des kürzeren Inhalts. |
+| `aside` ist lang und der kürzere Main-Content soll beim Scrollen sichtbar bleiben | `.with-main-sticky-top` verwenden; den Viewport-Abstand über `--main-sticky-top` setzen. |
+| Eine gemeinsame Unterkante ist Teil der bewussten Komposition | `.with-justify-bottom` verwenden. |
+
+Top-Ausrichtung und Sticky können lange Zweispalten-Abschnitte optisch auflockern. Setze sie trotzdem nicht pauschal: Bei ausgeglichenen Inhalten bleibt das Layout ohne Modifier ruhiger.
+
+Nutze immer die `trunkjs/content-pane`-Notation `{: layout="..."}`. Die Default-Style-Klasse wird automatisch ergänzt, wenn keine `style-*` Klasse gesetzt ist.
+
+## Relevante Konfiguration
+
+- `--cols`: Breite von `main` im Desktop-Zwölfersystem, standardmäßig `6`; normalerweise pro Instanz über `section-style` setzen
+- `--breakpoint`: Umschaltpunkt, standardmäßig `md`
+- `--container-width`: Containerbreite
+- `--gap`: Abstand zwischen den Spalten
+- `--main-sticky-top`: Viewport-Abstand für `.with-main-sticky-top`, standardmäßig `var(--nt-spacing-layout)`
+- `.surface-*`: Section-Fläche mit passenden semantischen Textfarben
+- `.bg-*`: reiner Section-Background
+- `.with-justify-top` / `.with-justify-center` / `.with-justify-bottom`: Inhalte beider Spalten auf Desktop oben, mittig oder unten ausrichten
+- `.with-main-sticky-top`: kürzeren Main-Content auf Desktop sticky oben halten
+- `.reverse`: tauscht `main` und `aside`
+- `.reverse-desktop`: tauscht sie nur im Desktop-Modus
+- `.breakout-start` / `.breakout-end`: aktiviert Desktop-Breakouts

package/.agents/skills/ntl-2col-usage/references/examples.md

@@ -0,0 +1,58 @@
+# NTL 2Col Usage-Beispiele
+
+Bereichsklassen wie `.aside` oder `.top` müssen am direkten Light-DOM-Kind von `ntl-2col` stehen.
+
+## Standard
+
+```markdown
+## Behandlungsschwerpunkt
+{: layout="ntl-2col" section-style="--cols: 8;"}
+
+Der Hauptinhalt bleibt in `main`.
+
+![Diagnostik](./diagnostik.jpg)
+```
+
+## Überschrift als linke Spalte
+
+Bevorzugt wird die Überschrift `aside` zugeordnet. `.reverse` setzt sie im Desktop-Modus nach links und mobil vor `main`.
+
+```markdown
+## Behandlungsschwerpunkt
+{: layout="ntl-2col.reverse" .aside section-style="--cols: 8;"}
+
+Der Hauptinhalt bleibt in `main`.
+```
+
+## Ausnahme: `top` als linke Spalte
+
+Ein leeres `aside` setzt `main` intern auf volle Breite. Die Theme-Klasse muss deshalb die betroffenen Parts im Desktop-Modus überschreiben und mobil zurücksetzen.
+
+```markdown
+## Behandlungsschwerpunkt
+{: layout="ntl-2col.style-top-heading" .top section-style="--cols: 8;"}
+
+Der Hauptinhalt bleibt in `main`.
+```
+
+```scss
+ntl-2col.style-top-heading {
+  @include twoCol.default-style();
+
+  &[mode='desktop'] {
+    &::part(wrapper) { flex-direction: row; }
+    &::part(top) { order: 1; width: auto; flex: 1 1 0; }
+    &::part(main) {
+      order: 2;
+      width: calc(100% * var(--cols, 8) / 12);
+      flex: 0 0 calc(100% * var(--cols, 8) / 12);
+    }
+  }
+
+  &[mode='mobile'] {
+    &::part(wrapper) { flex-direction: column; }
+    &::part(top) { order: 1; width: 100%; flex: 0 0 auto; }
+    &::part(main) { order: 2; width: 100%; flex: 0 0 auto; }
+  }
+}
+```

package/.ai-usage-info.md

@@ -0,0 +1,132 @@
+# @nextrap/ntl-2col
+
+Responsive two-column layout web component for Nextrap content sections.
+
+## First reference
+
+Before changing usage or styling, read the demo files:
+
+- `demo/base.md` contains the declarative examples and explains what each example demonstrates.
+- `demo/demo.scss` shows how semantic classes bind the exported SCSS mixins. The demo binds `default-style()` to `ntl-2col.style-default`; examples do not add a `.default` class. Demo classes starting with `style-` such as `style-testimonial` must include the complete visual baseline themselves.
+
+Do not duplicate examples from the demo here. Keep this file focused on implementation rules and package API hints.
+
+## Import
+
+```ts
+import '@nextrap/ntl-2col';
+```
+
+For styling:
+
+```scss
+@use '@nextrap/ntl-2col' as twoCol;
+```
+
+## Component behavior
+
+- Renders `header`, `top`, `main`, `aside`, `bottom` and `footer` areas in Shadow DOM.
+- `header` and `footer` are outside the `wrapper` frame; use them for headings or content that should not be inside the wrapper border.
+- `top` and `bottom` are inside the `wrapper`, span 100% width when assigned, and are hidden when empty; use them for framed full-width content.
+- Uses `BreakPointMixin`; the current mode is reflected as `mode="mobile"` or `mode="desktop"`.
+- Uses `SubLayoutApplyMixin` queries to assign direct `.header`, `.top`, `.bottom`, `.footer`, `.aside` children and direct `p:has(img)` elements.
+- Each named slot prepends an exceptional `@var(--ntl-2col-*-selector)` query. A successful variable selector overrides built-in assignments; missing, empty, or non-matching variables keep the defaults.
+- Every direct `p:has(img)` child is moved into the `aside` slot and receives class `auto`; this matches the paragraph generated by a normal Markdown image.
+- Nested image paragraphs and direct `<img>` children do not match the automatic query. Wrap them in a direct `.aside` child or assign the `aside` slot explicitly.
+- When `default-style()` is used, a direct child with class `.aside` (not just `slot="aside"`) automatically adds inner padding to the `aside` part. Add `.p-0` to that same direct `.aside` element to suppress this padding.
+
+Important CSS variables:
+
+- `--breakpoint`: layout switch breakpoint, default `md`
+- `--cols`: desktop main column width in a 12-column model, default `6`
+- `--container-width`: container width, default `var(--nt-container-width, 100%)`
+- `--gap`: gap between columns, default `var(--nt-spacing-layout)`
+- `--main-sticky-top`: viewport offset for `.with-main-sticky-top`, default `var(--nt-spacing-layout)`
+
+Exceptional selector variables: `--ntl-2col-header-selector`, `--ntl-2col-top-selector`, `--ntl-2col-aside-selector`, `--ntl-2col-bottom-selector`, and `--ntl-2col-footer-selector`. Do not use them without explicit prior approval. Prefer normal slots, modifiers, parts, and CSS layout. Values are unquoted CSS selectors, run only during the component's first update, and require `@trunkjs/content-pane` with `@var(...)` query support. Read `ntl-2col-theming` before using them.
+
+## CSS parts
+
+Use these parts for external styling:
+
+- `container`
+- `header`
+- `top`
+- `wrapper`
+- `main`
+- `aside`
+- `bottom`
+- `footer`
+
+## Styling rules
+
+- Use existing exported mixins whenever possible. Check `demo/demo.scss` before adding custom `::part(...)` styling.
+- Add a new mixin only if the required visual behavior is not covered by the existing package mixins.
+- Visual styling belongs in package SCSS mixins, not in Shadow DOM component CSS.
+- Feature/variant mixins must not contain concrete modifier class names. The caller binds the mixin to a semantic selector.
+- Feature/variant mixin names start with `with-<feature>`.
+- Each public mixin lives in its own file under `src/scss/` and is exported via `index.scss`.
+- Use `::part(...)` from Light DOM/demo/theme SCSS for Shadow DOM styling.
+- Do not use `::part(...)` inside Shadow DOM stylesheets.
+- Use `:has()` in Light DOM styling when parent state depends on assigned Light DOM children.
+- `::slotted(...)` can only style the assigned node itself; do not use it to change sibling Shadow DOM layout.
+
+## Exported mixins
+
+```scss
+@include twoCol.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
+);
+
+@include twoCol.with-reverse();
+@include twoCol.with-alternating();
+@include twoCol.with-breakout-end();
+@include twoCol.with-breakout-start();
+@include twoCol.with-image-auto-objectfit($objectFit: cover);
+@include twoCol.with-justify($justify: center);
+@include twoCol.with-main-sticky-top($top: var(--nt-spacing-layout));
+@include twoCol.with-modifier-classes();
+@include twoCol.with-wrapper-bg-color($background: transparent);
+@include twoCol.with-background-and-divider(
+  $gap: 2rem,
+  $background: var(--nt-primary),
+  $divider-color: var(--nt-light)
+);
+```
+
+`default-style()` is the default visual baseline and vertically centers the content of both columns on desktop through `$justify: center`. By default it includes `with-image-auto-objectfit()` and `with-modifier-classes()`.
+Set `$objectFit: none` or `$modifierClasses: false` to disable these bundled helpers.
+
+`default-style()` also adds `padding: var(--inner-padding)` to the `main` part. For the `aside` part, the same inner padding is only applied when the direct assigned Light DOM node uses class `.aside`. A plain `slot="aside"` alone does not trigger this automatic aside padding. Add `.p-0` to the direct `.aside` node to opt out.
+
+## Modifier classes
+
+`default-style()` loads the predefined modifier classes automatically. Only include `with-modifier-classes()` manually when not using `default-style()` or when `$modifierClasses: false` is set intentionally.
+
+Available classes:
+
+- `.reverse` reverses only `main` and `aside`; `header`/`top` stay above and `bottom`/`footer` stay below.
+- `.reverse-desktop` reverses columns only in desktop mode.
+- `.breakout-start` / `.breakout-end` enable desktop breakout layouts.
+- `.with-justify-top` / `.with-justify-center` / `.with-justify-bottom` align the content of both columns at the top, center or bottom on desktop.
+- `.with-main-sticky-top` keeps a shorter main column sticky at the top on desktop; configure its viewport offset with `--main-sticky-top`.
+
+For similarly tall columns, keep the default and do not add an alignment modifier. When one column—commonly `aside`—is substantially longer, use `.with-justify-top` for a shared top edge or `.with-main-sticky-top` when the shorter `main` content should remain visible while the long `aside` scrolls. Use `.with-justify-bottom` only for an intentional shared bottom edge.
+
+Use `@nextrap/style-utils` background utilities such as `.bg-primary` or `.bg-primary-subtle` for section background colors. Use `default-style($wrapper-bg-color: ...)` or `with-wrapper-bg-color($background)` if the Shadow DOM `wrapper` part needs its own background; `default-style()` sets it to transparent by default via this mixin.
+
+## Shadow DOM implementation hints
+
+- Keep Shadow DOM CSS minimal and functional only.
+- Use `@nextrap/style-reset` in the component styles array.
+- Do not import `@nextrap/style-base` into Shadow DOM styles; use global `--nt-*` variables from outside.
+- Reuse the existing `data-query` / `SubLayoutApplyMixin` pattern for slot/content processing.

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 2.0.1 (2026-09-10)
+
+### 🚀 Features
+
+- **ntl-2col:** allow theme-controlled slot selectors ([f585712](https://github.com/nextrap/nextrap-monorepo/commit/f585712))
+- **ntl-2col:** add main positioning modifiers ([b6f35f9](https://github.com/nextrap/nextrap-monorepo/commit/b6f35f9))
+- add component theme and usage skills ([617cfde](https://github.com/nextrap/nextrap-monorepo/commit/617cfde))
+
+### 🩹 Fixes
+
+- declare external libraries as peers and retain test dependencies ([67c6ffa](https://github.com/nextrap/nextrap-monorepo/commit/67c6ffa))
+- **ntl:** migrate ntl-2col to nt-core ([568f8b2](https://github.com/nextrap/nextrap-monorepo/commit/568f8b2))
+- **layout:** keep layout packages separate ([c82b05a](https://github.com/nextrap/nextrap-monorepo/commit/c82b05a))
+- use aliasesExclude to avoid internal relative paths ([6b8123e](https://github.com/nextrap/nextrap-monorepo/commit/6b8123e))
+
+### ❤️ Thank You
+
+- Enzo Volkmann @evolkmann
+- Matthias Leuffen
+
 ## 0.1.4 (2025-07-25)
 
 This was a version bump only for ntl-2col to align it with other projects, there were no code changes.

package/README.md

@@ -2,7 +2,7 @@
 
 This library was generated with [Nx](https://nx.dev).
 
-## Building
+## Visual testing
 
 Run `nx build ntl-2col` to build the library.
 

package/default.scss

@@ -0,0 +1,13 @@
+@use './index' as mixin;
+
+.default {
+  @include mixin.default-style(var(--nt-spacing-text), var(--nt-spacing-text));
+}
+
+.reverse {
+  @include mixin.with-reverse;
+}
+
+.alternating {
+  @include mixin.with-alternating;
+}

package/index.d.ts

@@ -1 +1 @@
-export * from './lib/ntl-2col';
+export * from './src/components/ntl-2col/ntl-2col';