@eui/eds-react 22.0.0-alpha.12 → 22.0.0-alpha.14

package/eds-banner/eds-banner-picture.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export interface EdsBannerPictureProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Picture content — typically an `<EdsBannerImage>` (or a native `<picture>`/`<img>`). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsBannerPicture` — pure React port of the Angular `eds-banner-picture` sub-component.
+ *
+ * Wrapper for the banner image media, projected into the banner's picture slot. Pure content
+ * projection (`<ng-content/>` → `{children}`). Its presence in the banner's children is what
+ * makes the banner render its picture container (mirrors the Angular `contentChild` query).
+ */
+export declare const EdsBannerPicture: React.ForwardRefExoticComponent<EdsBannerPictureProps & React.RefAttributes<HTMLDivElement>>;
+export interface EdsBannerImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * Sets the image anchor point via the `--eds-image-anchor` CSS custom property.
+     * Accepts values like 'center', 'top left', 'bottom right', '20% 20%'.
+     */
+    imageAnchor?: string;
+}
+/**
+ * `EdsBannerImage` — pure React port of the Angular `img[edsBannerImage]` directive.
+ *
+ * Renders the `<img>` that fills the banner picture container. Adds the `.eds-banner__image`
+ * class and supports anchor positioning via the `--eds-image-anchor` custom property (mirrors
+ * the directive's `[style.--eds-image-anchor]` host binding).
+ */
+export declare const EdsBannerImage: React.ForwardRefExoticComponent<EdsBannerImageProps & React.RefAttributes<HTMLImageElement>>;
+//# sourceMappingURL=eds-banner-picture.d.ts.map

package/eds-banner/eds-banner-picture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-banner-picture.d.ts","sourceRoot":"","sources":["../../src/eds-banner/eds-banner-picture.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,8FAa3B,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IAClF;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,8FAezB,CAAC"}

package/eds-banner/eds-banner-picture.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsBannerPicture` — pure React port of the Angular `eds-banner-picture` sub-component.
+ *
+ * Wrapper for the banner image media, projected into the banner's picture slot. Pure content
+ * projection (`<ng-content/>` → `{children}`). Its presence in the banner's children is what
+ * makes the banner render its picture container (mirrors the Angular `contentChild` query).
+ */
+export const EdsBannerPicture = React.forwardRef(function EdsBannerPicture({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-banner-picture eds-banner__picture ${className}` : 'eds-banner-picture eds-banner__picture', ...rest, children: children }));
+});
+/**
+ * `EdsBannerImage` — pure React port of the Angular `img[edsBannerImage]` directive.
+ *
+ * Renders the `<img>` that fills the banner picture container. Adds the `.eds-banner__image`
+ * class and supports anchor positioning via the `--eds-image-anchor` custom property (mirrors
+ * the directive's `[style.--eds-image-anchor]` host binding).
+ */
+export const EdsBannerImage = React.forwardRef(function EdsBannerImage({ imageAnchor, className, style, ...rest }, ref) {
+    const anchorStyle = imageAnchor
+        ? { ...style, '--eds-image-anchor': imageAnchor }
+        : style;
+    return (_jsx("img", { ref: ref, className: className ? `eds-banner__image ${className}` : 'eds-banner__image', style: anchorStyle, ...rest }));
+});
+//# sourceMappingURL=eds-banner-picture.js.map

package/eds-banner/eds-banner-picture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-banner-picture.js","sourceRoot":"","sources":["../../src/eds-banner/eds-banner-picture.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAwC,SAAS,gBAAgB,CAC7G,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAChC,GAAG;IAEH,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,0CAA0C,SAAS,EAAE,CAAC,CAAC,CAAC,wCAAwC,KACnH,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AAUH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAwC,SAAS,cAAc,CACzG,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAC1C,GAAG;IAEH,MAAM,WAAW,GAAG,WAAW;QAC3B,CAAC,CAAE,EAAE,GAAG,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAA0B;QAC1E,CAAC,CAAC,KAAK,CAAC;IACZ,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,qBAAqB,SAAS,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAC7E,KAAK,EAAE,WAAW,KACd,IAAI,GACV,CACL,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-banner/eds-banner-title.css

@@ -0,0 +1,3 @@
+.eds-banner-title {
+    display: block;
+}

package/eds-banner/eds-banner-title.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface EdsBannerTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+/**
+ * `EdsBannerTitle` — pure React port of the Angular `eds-banner-title` sub-component.
+ *
+ * Projects content as the main heading/title of the banner. Pure content projection
+ * (`<ng-content/>` → `{children}`); font sizing is driven by the parent banner via the
+ * `.eds-banner__title` class descendant selectors.
+ */
+export declare const EdsBannerTitle: React.ForwardRefExoticComponent<EdsBannerTitleProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-banner-title.d.ts.map

package/eds-banner/eds-banner-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-banner-title.d.ts","sourceRoot":"","sources":["../../src/eds-banner/eds-banner-title.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,4FAazB,CAAC"}

package/eds-banner/eds-banner-title.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsBannerTitle` — pure React port of the Angular `eds-banner-title` sub-component.
+ *
+ * Projects content as the main heading/title of the banner. Pure content projection
+ * (`<ng-content/>` → `{children}`); font sizing is driven by the parent banner via the
+ * `.eds-banner__title` class descendant selectors.
+ */
+export const EdsBannerTitle = React.forwardRef(function EdsBannerTitle({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-banner-title eds-banner__title ${className}` : 'eds-banner-title eds-banner__title', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-banner-title.js.map

package/eds-banner/eds-banner-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-banner-title.js","sourceRoot":"","sources":["../../src/eds-banner/eds-banner-title.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAsC,SAAS,cAAc,CACvG,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAChC,GAAG;IAEH,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,sCAAsC,SAAS,EAAE,CAAC,CAAC,CAAC,oCAAoC,KAC3G,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-banner/eds-banner-video.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface EdsBannerVideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
+    /** Video sources / content (e.g. `<source>` elements). */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsBannerVideo` — pure React port of the Angular `video[edsBannerVideo]` directive.
+ *
+ * Renders the `<video>` that fills the banner video container. Mirrors the Angular directive's
+ * behavior: the video is auto-played, muted, and looped, with native controls removed (the
+ * parent `EdsBanner` renders its own play/pause buttons). Its presence in the banner's children
+ * is what makes the banner render its video container (mirrors the Angular `contentChild` query).
+ */
+export declare const EdsBannerVideo: React.ForwardRefExoticComponent<EdsBannerVideoProps & React.RefAttributes<HTMLVideoElement>>;
+//# sourceMappingURL=eds-banner-video.d.ts.map

package/eds-banner/eds-banner-video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-banner-video.d.ts","sourceRoot":"","sources":["../../src/eds-banner/eds-banner-video.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACpF,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,8FAgBzB,CAAC"}

package/eds-banner/eds-banner-video.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * `EdsBannerVideo` — pure React port of the Angular `video[edsBannerVideo]` directive.
+ *
+ * Renders the `<video>` that fills the banner video container. Mirrors the Angular directive's
+ * behavior: the video is auto-played, muted, and looped, with native controls removed (the
+ * parent `EdsBanner` renders its own play/pause buttons). Its presence in the banner's children
+ * is what makes the banner render its video container (mirrors the Angular `contentChild` query).
+ */
+export const EdsBannerVideo = React.forwardRef(function EdsBannerVideo({ children, className, muted = true, loop = true, autoPlay = true, ...rest }, ref) {
+    return (_jsx("video", { ref: ref, className: className ? `eds-banner__video ${className}` : 'eds-banner__video', muted: muted, loop: loop, autoPlay: autoPlay, ...rest, children: children }));
+});
+//# sourceMappingURL=eds-banner-video.js.map

package/eds-banner/eds-banner-video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-banner-video.js","sourceRoot":"","sources":["../../src/eds-banner/eds-banner-video.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAwC,SAAS,cAAc,CACzG,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,QAAQ,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,EAC5E,GAAG;IAEH,OAAO,CACH,gBACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,qBAAqB,SAAS,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAC7E,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,KACd,IAAI,YAEP,QAAQ,GACL,CACX,CAAC;AACN,CAAC,CAAC,CAAC"}

package/eds-banner/eds-banner.css

@@ -0,0 +1,453 @@
+/* eds-banner — pure React CSS port of eds-banner.scss (class-based host model). */
+
+.eds-banner {
+    --banner-footer-height: 0px;
+    align-items: center;
+    border-radius: 0;
+    box-shadow: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: 0;
+    margin-inline-end: 0;
+    margin-top: 0;
+    position: relative;
+}
+
+/* ─── PICTURE CONTAINER ────────────────────────────────────────── */
+.eds-banner .eds-banner__picture-container {
+    margin: 0;
+    position: relative;
+    width: 100%;
+    aspect-ratio: 3/2;
+}
+
+/* ─── VIDEO CONTAINER ──────────────────────────────────────────── */
+.eds-banner .eds-banner__video-container {
+    object-fit: cover;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    aspect-ratio: 3/2;
+}
+
+/* ─── CREDIT / COPYRIGHT FOOTER ────────────────────────────────── */
+.eds-banner .eds-banner__credit {
+    background-color: var(--eds-c-surface-default);
+    color: var(--eds-c-foreground-default);
+    font: var(--eds-f-paragraph-xs);
+    margin-block-end: calc(var(--eds-sp-xl) * -1);
+    padding-block-start: 1px;
+    position: relative;
+    text-align: end;
+    width: 100%;
+    z-index: 1;
+}
+
+.eds-banner .eds-banner__credit-container {
+    padding-inline: var(--eds-sp-m);
+}
+
+/* ─── INFO / CONTENT AREA (below or over media) ────────────────── */
+.eds-banner .eds-banner__info {
+    background-color: var(--eds-c-surface-default);
+    display: flex;
+    flex-grow: 1;
+    padding-left: 10%;
+    width: 100%;
+}
+
+.eds-banner .eds-banner__container {
+    display: flex;
+    padding-block: var(--eds-sp-l) var(--eds-sp-xl);
+    width: 100%;
+}
+
+.eds-banner .eds-banner__content {
+    align-items: flex-start;
+    box-sizing: initial;
+    display: inline-flex;
+    flex-direction: column;
+    max-width: 50rem;
+}
+
+.eds-banner .eds-banner__content > :first-child {
+    margin-top: 0;
+}
+
+/* ─── IMAGE (projected) ────────────────────────────────────────── */
+.eds-banner .eds-banner__image {
+    display: block;
+    height: 100%;
+    max-height: 100%;
+    object-fit: cover;
+    object-position: var(--eds-image-anchor, top);
+    position: relative;
+    width: 100%;
+}
+
+/* ─── VIDEO (projected) ────────────────────────────────────────── */
+.eds-banner .eds-banner__video {
+    display: block;
+    height: 100%;
+    max-height: 100%;
+    object-fit: cover;
+    object-position: center;
+    position: relative;
+    width: 100%;
+}
+
+/* ─── PROJECTED SUB-COMPONENTS ─────────────────────────────────── */
+.eds-banner .eds-banner-picture {
+    display: block;
+    height: 100%;
+    position: relative;
+}
+
+.eds-banner .eds-banner__title {
+    color: var(--eds-c-foreground-default);
+    display: block;
+    margin: 0;
+    width: 100%;
+    font-family: Inter, arial, sans-serif;
+    font-size: var(--eds-f-size-4xl, 2rem);
+    font-weight: 400;
+    line-height: var(--eds-f-lh-xl, 2.5rem);
+}
+
+.eds-banner .eds-banner__description {
+    color: var(--eds-c-foreground-default);
+    display: block;
+    margin-block-start: var(--eds-sp-s);
+    margin-block-end: 0;
+    width: 100%;
+    font-family: Inter, arial, sans-serif;
+    font-size: var(--eds-f-size-2xl, 1.25rem);
+    font-weight: 300;
+    line-height: var(--eds-f-lh-l, 1.75rem);
+}
+
+.eds-banner .eds-banner__cta {
+    display: block;
+    margin-top: var(--eds-sp-m);
+    padding-top: var(--eds-sp-l);
+}
+
+/* ─── PLAY / PAUSE BUTTONS ─────────────────────────────────────── */
+.eds-banner .eds-banner__play,
+.eds-banner .eds-banner__pause {
+    align-items: center;
+    background-color: var(--eds-c-foreground-default);
+    border: none;
+    border-radius: 50%;
+    bottom: calc(var(--eds-sp-m) + var(--banner-footer-height));
+    color: var(--eds-c-surface-elevation);
+    cursor: pointer;
+    inset-inline-end: var(--eds-sp-m);
+    justify-content: center;
+    outline-offset: -4px;
+    padding: var(--eds-sp-xs);
+    position: absolute;
+    z-index: 2;
+}
+
+.eds-banner .eds-banner__play:hover,
+.eds-banner .eds-banner__play:focus-visible,
+.eds-banner .eds-banner__play:active,
+.eds-banner .eds-banner__pause:hover,
+.eds-banner .eds-banner__pause:focus-visible,
+.eds-banner .eds-banner__pause:active {
+    background-color: var(--eds-c-surface-elevation);
+    border: none;
+    color: var(--eds-c-foreground-default);
+}
+
+/* ─── FULL WIDTH VARIANT ───────────────────────────────────────── */
+.eds-banner.eds-banner--full-width {
+    border-radius: 0;
+    margin-inline: calc(50% - 50vw);
+    width: 100vw;
+}
+
+/* ─── NO MEDIA VARIANT ─────────────────────────────────────────── */
+.eds-banner.eds-banner--no-media {
+    background-color: var(--eds-c-surface-primary);
+}
+
+.eds-banner.eds-banner--no-media .eds-banner__info {
+    background-color: var(--eds-c-surface-primary);
+}
+
+.eds-banner.eds-banner--no-media .eds-banner__title,
+.eds-banner.eds-banner--no-media .eds-banner__description {
+    color: var(--eds-c-foreground-inverted);
+}
+
+.eds-banner.eds-banner--no-media .eds-banner__content {
+    background: transparent;
+    padding: 0;
+}
+
+.eds-banner.eds-banner--no-media .eds-banner__container {
+    padding-block: var(--eds-sp-xl) var(--eds-sp-2xl);
+}
+
+/* ─── FONT SIZE VARIANTS — font-s ──────────────────────────────── */
+.eds-banner.eds-banner--font-s .eds-banner__title {
+    font-size: var(--eds-f-size-2xl, 1.25rem);
+    font-weight: 400;
+    line-height: var(--eds-f-lh-l, 1.75rem);
+}
+
+.eds-banner.eds-banner--font-s .eds-banner__description {
+    font-size: var(--eds-f-size-l, 1.125rem);
+    font-weight: 400;
+    line-height: var(--eds-f-lh-m, 1.5rem);
+}
+
+/* ─── FONT SIZE VARIANTS — font-l ──────────────────────────────── */
+.eds-banner.eds-banner--font-l .eds-banner__title {
+    font-size: var(--eds-f-size-6xl, 3rem);
+    font-weight: 400;
+    line-height: var(--eds-f-lh-3xl, 3.25rem);
+}
+
+.eds-banner.eds-banner--font-l .eds-banner__description {
+    font-size: var(--eds-f-size-2xl, 1.25rem);
+    font-weight: 300;
+    line-height: var(--eds-f-lh-l, 1.75rem);
+}
+
+/* ─── FONT WEIGHT BOLD ─────────────────────────────────────────── */
+.eds-banner.eds-banner--font-weight-bold .eds-banner__title {
+    font-weight: 600;
+}
+
+.eds-banner.eds-banner--font-weight-bold .eds-banner__description {
+    font-weight: 400;
+}
+
+/* ─── RESPONSIVE (tablet+) ─────────────────────────────────────── */
+@media screen and (min-width: 768px) and (max-width: 1139px) {
+    .eds-banner .eds-banner__picture-container,
+    .eds-banner .eds-banner__video-container {
+        aspect-ratio: 3/1;
+    }
+
+    .eds-banner .eds-banner__container {
+        padding-block: var(--eds-sp-xl) var(--eds-sp-2xl);
+    }
+
+    .eds-banner .eds-banner__credit-container {
+        padding-inline: var(--eds-sp-xl);
+    }
+
+    .eds-banner .eds-banner__title {
+        font-size: var(--eds-f-size-5xl, 2.5rem);
+        letter-spacing: -1px;
+        line-height: var(--eds-f-lh-2xl, 3rem);
+    }
+
+    .eds-banner .eds-banner__description {
+        font-size: var(--eds-f-size-3xl, 1.5rem);
+        line-height: var(--eds-f-lh-l, 1.75rem);
+    }
+
+    .eds-banner.eds-banner--no-media .eds-banner__container {
+        padding-block: var(--eds-sp-2xl);
+    }
+
+    .eds-banner.eds-banner--font-s .eds-banner__title {
+        font-size: var(--eds-f-size-5xl, 2.5rem);
+        letter-spacing: -1px;
+        line-height: var(--eds-f-lh-2xl, 3rem);
+    }
+
+    .eds-banner.eds-banner--font-s .eds-banner__description {
+        font-size: var(--eds-f-size-xl, 1.25rem);
+        line-height: var(--eds-f-lh-l, 1.75rem);
+    }
+
+    .eds-banner.eds-banner--font-l .eds-banner__title {
+        font-size: var(--eds-f-size-8xl, 4rem);
+        letter-spacing: -1px;
+        line-height: var(--eds-f-lh-7xl, 4.5rem);
+    }
+
+    .eds-banner.eds-banner--font-l .eds-banner__description {
+        font-size: var(--eds-f-size-5xl, 2.5rem);
+        letter-spacing: -1px;
+        line-height: var(--eds-f-lh-2xl, 3rem);
+    }
+}
+
+/* ─── RESPONSIVE (desktop) ─────────────────────────────────────── */
+@media screen and (min-width: 1140px) {
+    .eds-banner {
+        aspect-ratio: 4/1;
+        padding-bottom: var(--banner-footer-height);
+    }
+
+    .eds-banner .eds-banner__info {
+        align-items: center;
+        background-color: initial;
+        position: absolute;
+        z-index: 1;
+    }
+
+    .eds-banner .eds-banner__container {
+        padding-block: var(--eds-sp-4xl);
+    }
+
+    .eds-banner .eds-banner__content {
+        background-color: var(--eds-c-surface-elevation);
+        border-radius: 0;
+        max-width: 42.5rem;
+        padding: var(--eds-sp-l) var(--eds-sp-xl) var(--eds-sp-xl);
+    }
+
+    .eds-banner .eds-banner__credit {
+        font: var(--eds-f-paragraph-xs);
+        margin-block-end: 0;
+        padding-block: var(--eds-sp-2xs);
+        position: absolute;
+        text-align: start;
+    }
+
+    .eds-banner .eds-banner__credit-container {
+        padding-inline: var(--eds-sp-2xl);
+    }
+
+    .eds-banner .eds-banner__picture-container,
+    .eds-banner .eds-banner__video-container {
+        aspect-ratio: auto;
+        height: 100%;
+        position: static;
+    }
+
+    .eds-banner .eds-banner__title {
+        font-size: var(--eds-f-size-6xl, 4rem);
+        letter-spacing: -2px;
+        line-height: var(--eds-f-lh-5xl, 4.5rem);
+        /* NOTE: the Angular source sets `display: inline` on the inner `.eds-banner__title`
+           while the projected `eds-banner-title` HOST stays `display: block; width: 100%`.
+           In this pure-React port both classes live on the SAME element, so keeping the title
+           block (not inline) reproduces the effective Angular layout — an inline title collapses
+           out of the `.eds-banner__content` flex column and breaks the stacked layout. */
+        display: block;
+        width: 100%;
+    }
+
+    .eds-banner .eds-banner__description {
+        font-size: var(--eds-f-size-5xl, 3rem);
+        letter-spacing: -1px;
+        line-height: var(--eds-f-lh-3xl, 3.5rem);
+        width: 100%;
+    }
+
+    .eds-banner.eds-banner--xs {
+        aspect-ratio: 6/1;
+    }
+
+    .eds-banner.eds-banner--s {
+        aspect-ratio: 5/1;
+    }
+
+    .eds-banner.eds-banner--m {
+        aspect-ratio: 4/1;
+    }
+
+    .eds-banner.eds-banner--l {
+        aspect-ratio: 3/1;
+    }
+
+    .eds-banner.eds-banner--no-media .eds-banner__container {
+        padding-block: var(--eds-sp-4xl);
+    }
+
+    .eds-banner.eds-banner--v-bottom .eds-banner__container {
+        padding-block-end: calc(var(--eds-sp-4xl) + var(--banner-footer-height));
+    }
+
+    .eds-banner.eds-banner--box-bg-none .eds-banner__content {
+        background-color: initial;
+        border-radius: 0;
+        padding: 0;
+    }
+
+    .eds-banner.eds-banner--box-bg-dark .eds-banner__content {
+        backdrop-filter: blur(2px);
+        background: rgba(0, 0, 0, 0.7);
+        box-decoration-break: clone;
+    }
+
+    /* ─── COLOR LIGHT ──────────────────────────────────────────── */
+    .eds-banner.eds-banner--color-light .eds-banner__title,
+    .eds-banner.eds-banner--color-light .eds-banner__description {
+        color: var(--eds-c-foreground-inverted);
+    }
+
+    /* ─── HORIZONTAL ALIGNMENT ─────────────────────────────────── */
+    .eds-banner.eds-banner--h-center .eds-banner__container {
+        justify-content: center;
+    }
+
+    .eds-banner.eds-banner--h-center .eds-banner__content {
+        align-items: center;
+        text-align: center;
+    }
+
+    .eds-banner.eds-banner--h-right .eds-banner__container {
+        justify-content: flex-end;
+    }
+
+    .eds-banner.eds-banner--h-right .eds-banner__content {
+        align-items: flex-end;
+        text-align: end;
+    }
+
+    /* ─── VERTICAL ALIGNMENT ───────────────────────────────────── */
+    .eds-banner.eds-banner--v-top .eds-banner__info {
+        top: 0;
+    }
+
+    .eds-banner.eds-banner--v-bottom .eds-banner__info {
+        bottom: 0;
+    }
+
+    /* ─── OVERLAY ──────────────────────────────────────────────── */
+    .eds-banner.eds-banner--overlay .eds-banner__picture-container::after,
+    .eds-banner.eds-banner--overlay .eds-banner__video-container::after {
+        background-color: rgba(0, 0, 0, 0.4);
+        content: '';
+        inset: 0;
+        mix-blend-mode: multiply;
+        position: absolute;
+        z-index: 0;
+    }
+
+    /* ─── FONT-S at desktop ────────────────────────────────────── */
+    .eds-banner.eds-banner--font-s .eds-banner__title {
+        font-size: var(--eds-f-size-6xl, 3rem);
+        letter-spacing: -1px;
+        line-height: var(--eds-f-lh-4xl, 3.5rem);
+    }
+
+    .eds-banner.eds-banner--font-s .eds-banner__description {
+        font-size: var(--eds-f-size-2xl, 1.25rem);
+        line-height: var(--eds-f-lh-xl, 2.5rem);
+    }
+
+    /* ─── FONT-L at desktop ────────────────────────────────────── */
+    .eds-banner.eds-banner--font-l .eds-banner__title {
+        font-size: var(--eds-f-size-10xl, 5rem);
+        letter-spacing: -2px;
+        line-height: var(--eds-f-lh-10xl, 5.5rem);
+    }
+
+    .eds-banner.eds-banner--font-l .eds-banner__description {
+        font-size: var(--eds-f-size-6xl, 3rem);
+        letter-spacing: -1px;
+        line-height: var(--eds-f-lh-4xl, 3.5rem);
+    }
+}

package/eds-banner/eds-banner.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+/** Local narrowed unions — the banner's variant contract (ported 1:1 from Angular `eds-banner`). */
+export type EdsBannerSize = 'xs' | 's' | 'm' | 'l';
+export type EdsBannerFontColor = 'light' | 'dark';
+export type EdsBannerFontSize = 's' | 'm' | 'l';
+export type EdsBannerFontWeight = 'light' | 'bold';
+export type EdsBannerHorizontalAlignment = 'left' | 'center' | 'right';
+export type EdsBannerVerticalAlignment = 'top' | 'center' | 'bottom';
+export interface EdsBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Data attribute value for end-to-end testing identification. @default 'eds-banner' */
+    e2eAttr?: string;
+    /** Accessible label describing the banner's purpose for screen readers. @default 'Banner' */
+    ariaLabel?: string;
+    /** Extra-small banner (6/1 aspect ratio). @default false */
+    edsSizeXS?: boolean;
+    /** Small banner (5/1 aspect ratio). @default false */
+    edsSizeS?: boolean;
+    /** Medium banner (4/1 aspect ratio). Default. @default false */
+    edsSizeM?: boolean;
+    /** Large banner (3/1 aspect ratio). @default false */
+    edsSizeL?: boolean;
+    /** String-based size variant for dynamic binding. @default '' */
+    edsSizeVariant?: EdsBannerSize | '';
+    /** Light background on the content box (default appearance). @default false */
+    hasLightBackground?: boolean;
+    /** Dark/transparent background on the content box (for overlay on media). @default false */
+    hasDarkBackground?: boolean;
+    /** No background on the content box. @default false */
+    hasNoBackground?: boolean;
+    /** Color of the font inside the banner content box. @default 'dark' */
+    fontColor?: EdsBannerFontColor;
+    /** Font size inside the banner content box. @default 'm' */
+    fontSize?: EdsBannerFontSize;
+    /** Font weight inside the banner content box. @default 'light' */
+    fontWeight?: EdsBannerFontWeight;
+    /** Horizontal alignment of the content inside the banner. @default 'left' */
+    horizontalAlignment?: EdsBannerHorizontalAlignment;
+    /** Vertical alignment of the content inside the banner. @default 'center' */
+    verticalAlignment?: EdsBannerVerticalAlignment;
+    /** Copyright text displayed in the banner footer. @default '' */
+    copyright?: string;
+    /** When true, the banner stretches to full width of its container. @default false */
+    isFullWidth?: boolean;
+    /** When true, applies a dark overlay on the media for better text readability. @default false */
+    hasOverlay?: boolean;
+    /**
+     * Banner content — an optional `<EdsBannerPicture>` or `<EdsBannerVideo>` for media, plus
+     * `<EdsBannerTitle>` / `<EdsBannerDescription>` / `<EdsBannerCta>` and any extra content.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * `EdsBanner` — pure React port of the Angular `eds-banner`.
+ *
+ * A prominent banner with an optional image (`EdsBannerPicture` + `EdsBannerImage`) or video
+ * (`EdsBannerVideo`) background, plus title / description / CTA content. Media presence is
+ * detected from `children` (mirrors the Angular `contentChild` queries). This component keeps
+ * the Angular class-based host model (`hostClasses()` BEM string) verbatim — variants are
+ * driven by `.eds-banner--*` classes, not `data-*` attributes — so the ported CSS matches the
+ * Angular SCSS `:host(.eds-banner--…)` selectors 1:1.
+ */
+export declare const EdsBanner: React.ForwardRefExoticComponent<EdsBannerProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-banner.d.ts.map

package/eds-banner/eds-banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-banner.d.ts","sourceRoot":"","sources":["../../src/eds-banner/eds-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,oGAAoG;AACpG,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AACnD,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,iBAAiB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAChD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,MAAM,CAAC;AACnD,MAAM,MAAM,4BAA4B,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvE,MAAM,MAAM,0BAA0B,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,wFAAwF;IACxF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,cAAc,CAAC,EAAE,aAAa,GAAG,EAAE,CAAC;IACpC,+EAA+E;IAC/E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,4FAA4F;IAC5F,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uDAAuD;IACvD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,kEAAkE;IAClE,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,6EAA6E;IAC7E,mBAAmB,CAAC,EAAE,4BAA4B,CAAC;IACnD,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,0BAA0B,CAAC;IAC/C,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qFAAqF;IACrF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iGAAiG;IACjG,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAyBD;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,uFAmKpB,CAAC"}