@nextrap/ntl-card-row 2.0.0

package/.agents/skills/ntl-card-row-theming/SKILL.md

@@ -0,0 +1,29 @@
+---
+name: ntl-card-row-theming
+description: Theme- und Component-Style-Klassen für @nextrap/ntl-card-row entwickeln, ohne das responsive Zwölfspalten-Layout zu überschreiben.
+---
+
+# NTL Card Row Theming
+
+Nutze diesen Skill für Theme-SCSS und visuelle Varianten. Für Markup und Card-Breiten nutze `ntl-card-row-usage`.
+
+## Theme-Regeln
+
+- Binde die vollständige visuelle Baseline an genau eine `style-*` Klasse, normalerweise mit `default-style()`.
+- Theme-Styles dürfen `--cols`, feste Breiten, `flex` und das Zwölfspalten-Layout nicht überschreiben.
+- Nutze ausschließlich die CSS-Variable `--cols`; eine Attribut-API gehört wegen fehlender browserübergreifender Unterstützung nicht zur Komponente.
+- `default-style($cols: n)` darf ausnahmsweise einen Theme-Fallback setzen. Bevorzuge `--cols` im Usage-Markup.
+- Nutze für visuelle Anpassungen die Parts `container`, `header`, `main` und `footer` sowie vorhandene Mixins.
+- Setze `--gutter-x` und `--gutter-y` immer als echte Längenwerte mit Einheit, z. B. `0px`, `16px` oder `24px`, niemals als einheitsloses `0`.
+- Desktop-spezifische Regeln werden auf `[mode='desktop']` gescoped.
+
+## Vorhandene Mixins
+
+| Mixin | Zweck |
+|---|---|
+| `default-style()` | Vollständige visuelle Baseline; optionaler `$cols`-Fallback |
+| `with-borderless-cards()` | Card-Rahmen und Innenabstand entfernen |
+| `with-footer-separators()` | Desktop-Trenner für Footer-Cards |
+| `with-item-separators()` | Responsive Trenner zwischen Cards |
+| `with-raised-card()` | Einzelne Card hervorheben |
+| `with-modifier-classes()` | Vorbereitete Modifier-Klassen registrieren |

package/.agents/skills/ntl-card-row-usage/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: ntl-card-row-usage
+description: "@nextrap/ntl-card-row korrekt importieren und in HTML oder trunkjs/content-pane Markdown mit flexiblen Card-Breiten verwenden."
+---
+
+# NTL Card Row Usage
+
+Nutze diesen Skill für Markup, Content-Zuordnung und Card-Breiten. Für Theme-SCSS nutze `ntl-card-row-theming`.
+
+## Import
+
+```ts
+import '@nextrap/ntl-card-row';
+```
+
+## HTML
+
+```html
+<ntl-card-row style="--cols: 3">
+  <h2 slot="header">Cards</h2>
+  <nte-card>Card 1</nte-card>
+  <nte-card style="--cols: 6">Card 2</nte-card>
+  <nte-card>Card 3</nte-card>
+</ntl-card-row>
+```
+
+`--cols` am Row-Element gilt als Default für alle Cards. Ein Wert direkt an einer Card überschreibt diesen Default.
+
+## Markdown
+
+```markdown
+## Cards
+{: layout="ntl-card-row" section-style="--cols: 4;"}
+
+### Optional row header
+{: slot="header"}
+
+### Card 1
+
+Text
+
+### Card 2
+{: section-style="--cols: 6;"}
+
+Breite Card
+```
+
+Nutze immer die `trunkjs/content-pane`-Notation `{: layout="..."}`. Die Default-Style-Klasse wird automatisch ergänzt, wenn keine `style-*` Klasse gesetzt ist.
+
+## Verhalten
+
+- Direkte Content-Sections werden als `nte-card`-Kinder gerendert.
+- Desktop verwendet feste Breiten von `--cols: 1` bis `--cols: 12`.
+- Ohne `--cols` an Row oder Card nutzt die Card die volle verfügbare Zeile.
+- Eine Card-Breite wächst oder schrumpft nicht; überbreiter Inhalt wird abgeschnitten.
+- Im Mobile-Modus stehen Cards immer untereinander in voller Breite.
+- `--min-width` und `--max-width` sind standardmäßig `unset`.
+- `--gutter-x` und `--gutter-y` benötigen immer Längeneinheiten und dürfen nie als einheitsloses `0` gesetzt werden; verwende `0px`, `16px` oder andere echte Längenwerte.
+- Verwende keine `cols`-Attribut-API.

package/.ai-usage-info.md

@@ -0,0 +1,111 @@
+# @nextrap/ntl-card-row
+
+Responsive card-row layout web component. Direct content sections are automatically rendered as `nte-card` children.
+
+## Import
+
+```ts
+import '@nextrap/ntl-card-row';
+```
+
+For styling:
+
+```scss
+@use '@nextrap/ntl-card-row' as cardRow;
+```
+
+The package publishes its root/index SCSS and `src/scss/**/*.scss` assets so themes can import these mixins.
+
+## Usage
+
+```html
+<ntl-card-row style="--cols: 3">
+  <h2 slot="header">Cards</h2>
+  <nte-card>Card 1</nte-card>
+  <nte-card class="highlight" style="--cols: 6">Card 2</nte-card>
+  <nte-card>Card 3</nte-card>
+</ntl-card-row>
+```
+
+Markdown/content-pane example:
+
+```md
+## Cards
+{: layout="ntl-card-row.with-borderless-cards" section-style="--cols: 4;"}
+
+### Optional row header
+{: slot="header"}
+
+### Card 1
+
+Text
+
+### Card 2
+{: section-style="--cols: 6;" .highlight}
+
+Wide highlighted card
+```
+
+Demo/theme SCSS binds the visual baseline to `ntl-card-row.style-default`; examples do not add a `.default` class. Demo modifier classes should be defined on `ntl-card-row` in demo/theme SCSS and include mixins there:
+
+```scss
+ntl-card-row.with-borderless-cards {
+  @include cardRow.with-borderless-cards();
+}
+
+ntl-card-row.with-item-separators {
+  @include cardRow.with-item-separators($separator-color: var(--nt-gray-400));
+}
+```
+
+## Behavior
+
+- Uses `BreakPointMixin`; the current mode is reflected as `mode="mobile"` or `mode="desktop"`.
+- Uses `SubLayoutApplyMixin` to assign direct headings to `header`, direct `footer` to `footer`, and direct `section` children to `nte-card`.
+- Desktop layout uses a 12-column model. Set `--cols: 1` through `--cols: 12` on `ntl-card-row` and optionally on individual cards.
+- A card-level `--cols` value overrides the inherited row value. Without either value, cards use the full available row width.
+- Fixed columns do not grow or shrink; overflowing content is clipped. Mobile mode stacks cards full-width.
+
+Important CSS variables:
+
+- `--breakpoint`: layout switch breakpoint, default `xl`
+- `--container-width`: row container width, default `var(--nt-container-width, 100%)`
+- `--cols`: desktop card width from 1 through 12; inherited by cards and defaults to full width
+- `--min-width` / `--max-width`: optional card constraints; both default to `unset`
+- `--gutter-x` / `--gutter-y`: card gaps; always pass real length values with units, preferably `px` such as `0px`, `16px` or `24px`, never unitless values like `0`
+
+## CSS parts
+
+Use `::part(container)`, `::part(header)`, `::part(main)` and `::part(footer)` for Light DOM/theme styling.
+
+## Mixins
+
+```scss
+@include cardRow.default-style(
+  $container-width: var(--nt-container-width, 100%),
+  $cols: null,
+  $gap: var(--nt-spacing-layout),
+  $inner-padding: 0,
+  $container-background: transparent,
+  $container-border: none,
+  $container-border-radius: 0,
+  $modifierClasses: true
+);
+
+@include cardRow.with-borderless-cards();
+@include cardRow.with-footer-separators($separator-color: var(--nt-primary));
+@include cardRow.with-item-separators($separator-color: var(--nt-gray-400));
+@include cardRow.with-raised-card();
+@include cardRow.with-modifier-classes();
+```
+
+`default-style()` includes modifier classes by default. Available classes: `.highlight` for raised cards and `.footer-separators` / legacy `.style-footer` for desktop footer separators.
+
+`$cols` is an optional theme fallback only. Prefer setting `--cols` in usage markup so the layout stays flexible; a card-level value overrides the inherited row value.
+
+When setting `--gutter-x` or `--gutter-y`, always include a length unit. Use `0px` instead of `0`, because the component uses gutter values in `calc()` expressions.
+
+- `with-borderless-cards()` sets `--border: none` and `--inner-padding: 0` for all direct `nte-card` children.
+- `with-item-separators()` adds separator pseudo-elements between direct `nte-card` children: vertical in desktop mode at half the horizontal gap, horizontal in mobile/tablet mode at half the vertical gap.
+
+Keep Shadow DOM styles functional only; visual row styles belong in these mixins.

package/README.md

@@ -0,0 +1,68 @@
+# ntl-card-row
+
+Responsive row layout for `nte-card` components. The default layout follows Bootstrap's 12-column model.
+
+## Visual Demo
+
+```bash
+nx dev ntl-card-row
+```
+
+## Usage
+
+```ts
+import '@nextrap/ntl-card-row';
+```
+
+```scss
+@use '@nextrap/ntl-card-row' as cardRow;
+
+ntl-card-row {
+  @include cardRow.default-style();
+}
+```
+
+Content-Pane example:
+
+```markdown
+## Cards
+{: layout="ntl-card-row" section-style="--cols: 4;"}
+
+### Card 1
+{: layout="nte-card"}
+
+### Card 2
+{: layout="nte-card" section-style="--cols: 6;"}
+
+### Card 3
+{: layout="nte-card"}
+```
+
+The row follows Bootstrap's 12-column model. `--cols: 4` makes every card four columns wide; an individual card can override the inherited row value with its own `--cols`. Fixed columns neither grow nor shrink, and overflowing card content is clipped. Without `--cols`, a card uses the full available row width.
+
+`--min-width` and `--max-width` optionally constrain cards and both default to `unset`.
+
+When setting `--gutter-x` or `--gutter-y`, always use real length values with units such as `0px`, `16px` or `24px`. Never use unitless `0`, because gutter values are used in `calc()` expressions.
+
+```markdown
+## Cards
+{: layout="ntl-card-row" section-style="--min-width: 18rem; --max-width: 32rem"}
+
+### Card 1
+{: layout="nte-card"}
+
+### Card 2
+{: layout="nte-card"}
+
+### Card 3
+{: layout="nte-card"}
+```
+
+## Migrations
+
+| Old | New |
+| --- | --- |
+| `--default-cols: 4` | `--cols: 4` on the row |
+| `class="with-min-width"` | Remove; set `--min-width` directly if needed |
+
+See `.ai-usage-info.md` and `demo/base.md` for implementation hints and examples.

package/default.scss

@@ -0,0 +1,10 @@
+@use './index' as mixin;
+
+.style-default {
+  @include mixin.default-style();
+}
+
+.footer-separators,
+.style-footer {
+  @include mixin.with-footer-separators();
+}

package/index.d.ts

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

package/index.js

@@ -0,0 +1,66 @@
+import { nextrap_element as k } from "@nextrap/nt-core";
+import { unsafeCSS as _, html as q } from "lit";
+import { customElement as O } from "lit/decorators.js";
+import { resetStyle as P } from "@nextrap/style-reset";
+import "@nextrap/nte-card";
+const A = ':host{--container-width: var(--nt-container-width, 100%);--min-width: unset;--max-width: unset;--gutter-x: var(--nt-spacing-layout);--gutter-y: var(--nt-spacing-layout);--breakpoint: xl;display:block;box-sizing:border-box}#container{margin:0 auto;width:var(--container-width);box-sizing:border-box}#header:has(.slot-empty),#footer:has(.slot-empty){display:none}#main{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gutter-y, 0px) var(--gutter-x, 0px)}#main ::slotted(*){box-sizing:border-box;flex:0 1 calc(8.3333333333% * var(--cols, 12) - var(--gutter-x, 0px) * (12 - var(--cols, 12)) / 12);width:calc(8.3333333333% * var(--cols, 12) - var(--gutter-x, 0px) * (12 - var(--cols, 12)) / 12);min-width:var(--min-width);max-width:var(--max-width);overflow:hidden}:host([cols="1"]){--cols: 1}#main ::slotted([cols="1"]){--cols: 1}:host([cols="2"]){--cols: 2}#main ::slotted([cols="2"]){--cols: 2}:host([cols="3"]){--cols: 3}#main ::slotted([cols="3"]){--cols: 3}:host([cols="4"]){--cols: 4}#main ::slotted([cols="4"]){--cols: 4}:host([cols="5"]){--cols: 5}#main ::slotted([cols="5"]){--cols: 5}:host([cols="6"]){--cols: 6}#main ::slotted([cols="6"]){--cols: 6}:host([cols="7"]){--cols: 7}#main ::slotted([cols="7"]){--cols: 7}:host([cols="8"]){--cols: 8}#main ::slotted([cols="8"]){--cols: 8}:host([cols="9"]){--cols: 9}#main ::slotted([cols="9"]){--cols: 9}:host([cols="10"]){--cols: 10}#main ::slotted([cols="10"]){--cols: 10}:host([cols="11"]){--cols: 11}#main ::slotted([cols="11"]){--cols: 11}:host([cols="12"]){--cols: 12}#main ::slotted([cols="12"]){--cols: 12}:host([mode=desktop]) #main{flex-direction:row}:host([mode=mobile]) #container{width:100%}:host([mode=mobile]) #main{flex-direction:column}:host([mode=mobile]) #main ::slotted(*){--gutter-x: 0px;flex:0 0 100%;width:100%}';
+var C = Object.create, h = Object.defineProperty, E = Object.getOwnPropertyDescriptor, y = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), b = (t) => {
+  throw TypeError(t);
+}, j = (t, e, r) => e in t ? h(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, I = (t, e) => h(t, "name", { value: e, configurable: !0 }), L = (t) => [, , , C((t == null ? void 0 : t[y("metadata")]) ?? null)], D = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], w = (t) => t !== void 0 && typeof t != "function" ? b("Function expected") : t, F = (t, e, r, l, o) => ({ kind: D[t], name: e, metadata: l, addInitializer: (s) => r._ ? b("Already initialized") : o.push(w(s || null)) }), M = (t, e) => j(e, y("metadata"), t[3]), T = (t, e, r, l) => {
+  for (var o = 0, s = t[e >> 1], a = s && s.length; o < a; o++) s[o].call(r);
+  return l;
+}, H = (t, e, r, l, o, s) => {
+  var a, v, u, c = e & 7, f = !1, x = 0, z = t[x] || (t[x] = []), n = c && (o = o.prototype, c < 5 && (c > 3 || !f) && E(o, r));
+  I(o, r);
+  for (var d = l.length - 1; d >= 0; d--)
+    u = F(c, r, v = {}, t[3], z), a = (0, l[d])(o, u), v._ = 1, w(a) && (o = a);
+  return M(t, o), n && h(o, r, n), f ? c ^ 4 ? s : n : o;
+}, g, p, S;
+g = [O("ntl-card-row")];
+const m = class m extends (S = k({
+  breakpoints: !0,
+  subLayoutApply: !0
+})) {
+  beforeLayoutCallback(e) {
+    var l;
+    const r = e.querySelector(':scope > section > [slot="header"]');
+    if (r instanceof HTMLElement) {
+      const o = r.parentElement, s = Array.from(e.children).find(
+        (a) => a.matches(".header, h1, h2, h3, h4, h5, h6")
+      );
+      s == null || s.setAttribute("slot", "header"), s ? s.after(r) : e.prepend(r), o != null && o.matches("section") && o.children.length === 0 && ((l = o.textContent) == null ? void 0 : l.trim()) === "" && o.remove();
+    }
+    return !1;
+  }
+  render() {
+    return q`
+      <div part="container" id="container">
+        <div id="header" part="header">
+          <slot
+            name="header"
+            data-query=":scope > .header | :scope > h1,:scope > h2,:scope > h3,:scope > h4,:scope > h5,:scope > h6, :scope > p"
+          ></slot>
+        </div>
+        <div part="main" id="main">
+          <!-- set .style-parent to indicate that the child elements should inherit the style of the parent -->
+          <slot
+            data-query=":scope > section"
+            data-set-attribute-layout="nte-card.style-parent"
+            data-query-opt=""
+          ></slot>
+        </div>
+        <div id="footer" part="footer">
+          <slot name="footer" data-query=":scope > footer"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+m.styles = [_(A), _(P)];
+let i = m;
+p = L(S);
+i = H(p, 0, "NtlCardRowElement", g, i);
+T(p, 1, i);
+export {
+  i as NtlCardRowElement
+};

package/index.scss

@@ -0,0 +1,6 @@
+@forward 'src/scss/default-style';
+@forward 'src/scss/with-borderless-cards';
+@forward 'src/scss/with-footer-separators';
+@forward 'src/scss/with-item-separators';
+@forward 'src/scss/with-modifier-classes';
+@forward 'src/scss/with-raised-card';

package/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@nextrap/ntl-card-row",
+    "version": "2.0.0",
+    "files": [
+        "*.*",
+        "src",
+        ".agents"
+    ],
+    "main": "./index.js",
+    "repository": {
+        "directory": "nextrap-layout/ntl-card-row",
+        "type": "git",
+        "url": "https://github.com/nextrap/nextrap-monorepo"
+    },
+    "dependencies": {
+        "@nextrap/nte-card": "^2.0.0",
+        "@nextrap/nt-core": "^2.0.0",
+        "@nextrap/style-reset": "^2.0.0",
+        "lit": "^3.3.1"
+    },
+    "devDependencies": {
+        "@nextrap/style-base": "^2.0.0",
+        "@nextrap/style-utils": "^2.0.0",
+        "@trunkjs/markdown-loader": "^1.0.0"
+    },
+    "type": "module",
+    "types": "./index.d.ts",
+    "web-types": "./web-types.json"
+}

package/src/components/ntl-card-row/ntl-card-row.d.ts

@@ -0,0 +1,7 @@
+declare const NtlCardRowElement_base: import('@nextrap/nt-core').InternalNextrapElementType;
+export declare class NtlCardRowElement extends NtlCardRowElement_base {
+    static styles: import('lit').CSSResult[];
+    beforeLayoutCallback(sourceElement: HTMLElement): boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};

package/src/components/ntl-card-row/ntl-card-row.scss

@@ -0,0 +1,81 @@
+/* The ShadowDOM Styles */
+
+:host {
+  --container-width: var(--nt-container-width, 100%);
+  --min-width: unset;
+  --max-width: unset;
+  --gutter-x: var(--nt-spacing-layout);
+  --gutter-y: var(--nt-spacing-layout);
+  --breakpoint: xl;
+
+  display: block;
+  box-sizing: border-box;
+}
+
+#container {
+  margin: 0 auto;
+  width: var(--container-width);
+  box-sizing: border-box;
+}
+
+#header,
+#footer {
+  &:has(.slot-empty) {
+    display: none;
+  }
+}
+
+#main {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--gutter-y, 0px) var(--gutter-x, 0px);
+
+  ::slotted(*) {
+    box-sizing: border-box;
+    flex: 0 1 calc(
+      100% / 12 * var(--cols, 12)
+      - var(--gutter-x, 0px) * (12 - var(--cols, 12)) / 12
+    );
+    width: calc(
+      100% / 12 * var(--cols, 12)
+      - var(--gutter-x, 0px) * (12 - var(--cols, 12)) / 12
+    );
+    min-width: var(--min-width);
+    max-width: var(--max-width);
+    overflow: hidden;
+  }
+}
+
+// Firefox cannot cast attr() values to numbers yet. Map the finite range without attr().
+@for $cols from 1 through 12 {
+  :host([cols='#{$cols}']) {
+    --cols: #{$cols};
+  }
+
+  #main ::slotted([cols='#{$cols}']) {
+    --cols: #{$cols};
+  }
+}
+
+:host([mode='desktop']) {
+  #main {
+    flex-direction: row;
+  }
+}
+
+:host([mode='mobile']) {
+  #container {
+    width: 100%;
+  }
+
+  #main {
+    flex-direction: column;
+
+    ::slotted(*) {
+      --gutter-x: 0px; // Must be 0px - otherwise: error in Firefox
+      flex: 0 0 100%;
+      width: 100%;
+    }
+  }
+}

package/src/lib/utils.d.ts

@@ -0,0 +1,3 @@
+/**
+ * Shared utility functions for file operations.
+ */

package/src/scss/_default-style.scss

@@ -0,0 +1,49 @@
+@use 'with-modifier-classes' as modifier-classes;
+
+@mixin default-style(
+  $container-width: var(--nt-container-width, 100%),
+  $cols: null,
+  $gap: var(--nt-spacing-layout),
+  $inner-padding: 0,
+  $container-background: transparent,
+  $container-border: none,
+  $container-border-radius: 0,
+  $modifierClasses: true
+) {
+  --container-width: #{$container-width};
+  --gutter-x: #{$gap};
+  --gutter-y: #{$gap};
+  --row-inner-padding: #{$inner-padding};
+  --container-background: #{$container-background};
+  --container-border: #{$container-border};
+  --container-border-radius: #{$container-border-radius};
+
+  @if ($cols != null and $cols != none) {
+    --cols: #{$cols};
+  }
+
+  @if ($modifierClasses != false and $modifierClasses != none) {
+    @include modifier-classes.with-modifier-classes();
+  }
+
+  &::part(header) {
+    text-align: center;
+  }
+
+  &::part(container) {
+    background: var(--container-background);
+    border: var(--container-border);
+    border-radius: var(--container-border-radius);
+    box-sizing: border-box;
+    padding: var(--row-inner-padding);
+  }
+
+  &[mode='mobile'] > nte-card {
+    box-sizing: border-box;
+    // No Padding here
+  }
+
+  &[mode='desktop'] > nte-card {
+    padding: 0;
+  }
+}

package/src/scss/_with-borderless-cards.scss

@@ -0,0 +1,6 @@
+@mixin with-borderless-cards($card-border: none, $card-inner-padding: 0) {
+  > nte-card {
+    --border: #{$card-border};
+    --inner-padding: #{$card-inner-padding};
+  }
+}

package/src/scss/_with-footer-separators.scss

@@ -0,0 +1,12 @@
+@mixin with-footer-separators($separator-color: var(--nt-primary), $card-border: none, $card-border-radius: 0) {
+  --separator-color: #{$separator-color};
+
+  > nte-card {
+    --border: #{$card-border};
+    --border-radius: #{$card-border-radius};
+  }
+
+  &[mode='desktop'] > nte-card:not(:last-child)::part(wrapper) {
+    border-right: 1px solid var(--separator-color);
+  }
+}

package/src/scss/_with-item-separators.scss

@@ -0,0 +1,30 @@
+@mixin with-item-separators($separator-color: var(--nt-primary), $separator-width: 1px, $separator-inset: 0) {
+  --item-separator-color: #{$separator-color};
+  --item-separator-width: #{$separator-width};
+  --item-separator-inset: #{$separator-inset};
+
+  > nte-card {
+    position: relative;
+  }
+
+  > nte-card:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    background: var(--item-separator-color);
+    pointer-events: none;
+  }
+
+  &[mode='desktop'] > nte-card:not(:last-child)::after {
+    top: var(--item-separator-inset);
+    right: calc(var(--gutter-x, 0px) / -2 - var(--item-separator-width) / 2);
+    bottom: var(--item-separator-inset);
+    width: var(--item-separator-width);
+  }
+
+  &[mode='mobile'] > nte-card:not(:last-child)::after {
+    right: var(--item-separator-inset);
+    bottom: calc(var(--gutter-y, 0px) / -2 - var(--item-separator-width) / 2);
+    left: var(--item-separator-inset);
+    height: var(--item-separator-width);
+  }
+}

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

@@ -0,0 +1,13 @@
+@use 'with-footer-separators' as footer-separators;
+@use 'with-raised-card' as raised-card;
+
+@mixin with-modifier-classes {
+  &.footer-separators,
+  &.style-footer {
+    @include footer-separators.with-footer-separators();
+  }
+
+  > nte-card.highlight {
+    @include raised-card.with-raised-card();
+  }
+}

package/src/scss/_with-raised-card.scss

@@ -0,0 +1,13 @@
+@mixin with-raised-card(
+  $scale: 1.05,
+  $shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15),
+  $transition: (
+    transform 0.3s ease,
+    box-shadow 0.3s ease,
+  )
+) {
+  transform: scale($scale);
+  box-shadow: $shadow;
+  transition: $transition;
+  z-index: 1;
+}