@kickstartds/ds-agency-premium 1.6.68--canary.1591.bd2b7d4.0 → 1.6.68--canary.1597.5fb463e.0

package/dist/{HeroProps-f704d270.d.ts → HeroProps-aa4e6431.d.ts}

@@ -72,6 +72,10 @@ type AltText = string;
  * Choose the alginment of the module content
  */
 type ModuleAligment = "center" | "below" | "left" | "right" | "corner";
+/**
+ * Inverted color scheme for the box
+ */
+type Inverted = boolean;
 interface HeroProps {
     headline?: Headline;
     sub?: ModuleSubheadline;
@@ -84,6 +88,7 @@ interface HeroProps {
     overlay?: GridLayer;
     image?: BackgroundImage;
     textPosition?: ModuleAligment;
+    inverted?: Inverted;
 }
 interface Button {
     label?: Label;
@@ -101,4 +106,4 @@ interface BackgroundImage {
     indent?: ImageIndent;
     alt?: AltText;
 }
-export { Headline, ModuleSubheadline, ModuleText, HighlightText, ColorNeutral, Height, Textbox, Label, Icon, Target, GridLayer, MobileImageSource, TabletImageSource, DesktopImageSource, OptionalSource, ImageIndent, AltText, ModuleAligment, HeroProps, Button, BackgroundImage };
+export { Headline, ModuleSubheadline, ModuleText, HighlightText, ColorNeutral, Height, Textbox, Label, Icon, Target, GridLayer, MobileImageSource, TabletImageSource, DesktopImageSource, OptionalSource, ImageIndent, AltText, ModuleAligment, Inverted, HeroProps, Button, BackgroundImage };

package/dist/SectionProps-7caa223c.d.ts

@@ -8,9 +8,9 @@ import { DividerProps } from "./DividerProps-2ef31901.js";
 import { FaqProps } from "./FaqProps-ad618cd5.js";
 import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
-import { HeroProps } from "./HeroProps-f704d270.js";
+import { HeroProps } from "./HeroProps-aa4e6431.js";
 import { HtmlProps } from "./HtmlProps-9d091769.js";
-import { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
+import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";
@@ -19,7 +19,7 @@ import { StatsProps } from "./StatsProps-bf5ef578.js";
 import { TeaserCardProps } from "./TeaserCardProps-b9c28e78.js";
 import { TestimonialsProps } from "./TestimonialsProps-e344f597.js";
 import { TextProps } from "./TextProps-a23170d2.js";
-import { VideoCurtainProps } from "./VideoCurtainProps-6c625a69.js";
+import { VideoCurtainProps } from "./VideoCurtainProps-2b7b0265.js";
 import { ButtonProps } from "./ButtonProps-03ff6d21.js";
 /**
  * Width of section to use

package/dist/SliderProps-8a0dba0d.d.ts

@@ -6,7 +6,7 @@
 import { CtaProps } from "./CtaProps-8a0dba0d.js";
 import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
-import { HeroProps } from "./HeroProps-f704d270.js";
+import { HeroProps } from "./HeroProps-aa4e6431.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { StatsProps } from "./StatsProps-bf5ef578.js";

package/dist/{VideoCurtainProps-6c625a69.d.ts → VideoCurtainProps-2b7b0265.d.ts}

@@ -54,7 +54,7 @@ type DesktopVideoSource = string;
 /**
  * Choose the alginment of the module content
  */
-type ModuleAligment = "center" | "left" | "right";
+type ModuleAligment = "center" | "below" | "left" | "right" | "corner";
 interface VideoCurtainProps {
     headline?: Headline;
     sub?: ModuleSubheadline;

package/dist/components/blog-overview/blog-overview.schema.dereffed.json

@@ -879,6 +879,12 @@
                       "type": "string",
                       "default": "bottom"
                     },
+                    "inverted": {
+                      "type": "boolean",
+                      "title": "Inverted",
+                      "description": "Inverted color scheme for the box",
+                      "default": false
+                    },
                     "type": {
                       "const": "hero"
                     }
@@ -2075,6 +2081,12 @@
                                 "type": "string",
                                 "default": "bottom"
                               },
+                              "inverted": {
+                                "type": "boolean",
+                                "title": "Inverted",
+                                "description": "Inverted color scheme for the box",
+                                "default": false
+                              },
                               "type": {
                                 "const": "hero"
                               }
@@ -3102,8 +3114,10 @@
                       "description": "Choose the alginment of the module content",
                       "enum": [
                         "center",
+                        "below",
                         "left",
-                        "right"
+                        "right",
+                        "corner"
                       ],
                       "type": "string",
                       "default": "bottom"

package/dist/components/blog-overview/index.d.ts

@@ -1,4 +1,4 @@
-import { BlogOverviewProps } from "../../BlogOverviewProps-7caa223c.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
 export type { BlogOverviewProps };

package/dist/components/blog-post/blog-post.schema.dereffed.json

@@ -1155,6 +1155,12 @@
                       "type": "string",
                       "default": "bottom"
                     },
+                    "inverted": {
+                      "type": "boolean",
+                      "title": "Inverted",
+                      "description": "Inverted color scheme for the box",
+                      "default": false
+                    },
                     "type": {
                       "const": "hero"
                     }
@@ -2351,6 +2357,12 @@
                                 "type": "string",
                                 "default": "bottom"
                               },
+                              "inverted": {
+                                "type": "boolean",
+                                "title": "Inverted",
+                                "description": "Inverted color scheme for the box",
+                                "default": false
+                              },
                               "type": {
                                 "const": "hero"
                               }
@@ -3378,8 +3390,10 @@
                       "description": "Choose the alginment of the module content",
                       "enum": [
                         "center",
+                        "below",
                         "left",
-                        "right"
+                        "right",
+                        "corner"
                       ],
                       "type": "string",
                       "default": "bottom"

package/dist/components/blog-post/index.d.ts

@@ -1,4 +1,4 @@
-import { BlogPostProps } from "../../BlogPostProps-7caa223c.js";
+import { BlogPostProps } from "../../BlogPostProps-d9decb7c.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
 export type { BlogPostProps };

package/dist/components/header/header.css

@@ -1,8 +1,11 @@
 :root,
 [ks-theme],
 [ks-inverted] {
+  --dsa-header--height: calc(var(--dsa-logo--height) + var(--dsa-header--spacing-vertical) * 2);
   --dsa-header--spacing-vertical: var(--ks-spacing-inset-m);
   --dsa-header--spacing-horizontal: var(--ks-spacing-inset-xl);
+  --dsa-header_floating--spacing-horizontal: var(--ks-spacing-inset-l);
+  --dsa-header_open--shadow: 0 0 0 100px var(--ks-color-fg-alpha-3);
 }
 @media (min-width: 62em) {
   :root,
@@ -10,14 +13,15 @@
   [ks-inverted] {
     --dsa-header--spacing-vertical: var(--ks-spacing-stack-s);
     --dsa-header--spacing-horizontal: var(--dsa-content--horizontal-spacing);
+    --dsa-header_floating--spacing-horizontal: var(--ks-spacing-inset-m);
   }
 }
 
 .dsa-header {
   --dsa-header--max-width: var(--dsa-content--width_max);
   --dsa-header--background: var(--ks-background-color-default);
-  --dsa-header_floating--background: var(--dsa-overlay--background-color);
-  --dsa-header_floating--backdrop-filter: var(--dsa-overlay--backdrop-filter);
+  --dsa-header_floating--background: var(--dsa-overlay-box--background-color);
+  --dsa-header_floating--backdrop-filter: var(--dsa-overlay-box--backdrop-filter);
   --dsa-header__logo--height: var(--dsa-logo--height);
 }
 
@@ -27,24 +31,54 @@
   width: 100%;
   display: flex;
   padding: var(--dsa-header--spacing-vertical) 0;
-  position: relative;
+  transition: height var(--ks-transition-collapse);
+  height: calc(var(--dsa-logo--height) + var(--dsa-header--spacing-vertical) * 2);
+}
+.dsa-header--overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 998;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--ks-color-fg-alpha-3);
+  opacity: 0;
+  transition: opacity var(--ks-transition-fade);
+  pointer-events: none;
+}
+.overlay-open .dsa-header--overlay {
+  opacity: 1;
+}
+.overlay-open .dsa-header {
+  height: 100vh;
 }
 .dsa-header--floating {
-  background: var(--dsa-header_floating--background, var(--dsa-overlay--background-color), transparent);
+  top: 10px;
+  width: calc(var(--dsa-content--width_wide) + var(--dsa-header_floating--spacing-horizontal) * 2);
+  max-width: calc(100vw - var(--dsa-header--spacing-horizontal) * 2);
+  padding: var(--dsa-header--spacing-vertical) 0;
+  margin: auto;
+  left: 50%;
+  transform: translate(-50%, 0);
+  background: var(--dsa-header_floating--background, var(--dsa-overlay-box--background-color));
   backdrop-filter: var(--dsa-header_floating--backdrop-filter, blur(10px));
   position: absolute;
+  border-radius: var(--ks-border-radius-surface);
+}
+.overlay-open .dsa-header--floating {
+  background: var(--dsa-header--background, var(--ks-background-color-default));
+  height: 95%;
 }
 .dsa-header--floating .c-nav-main__link {
   text-shadow: 0 0 10px var(--ks-color-bg-alpha-5);
 }
 .dsa-header__content {
-  padding: 0 var(--dsa-header--spacing-horizontal);
+  padding: 0 var(--dsa-header_floating--spacing-horizontal);
   max-width: var(--dsa-header--max-width);
   width: 100%;
-  margin: auto;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .dsa-header--spacer {

package/dist/components/header/index.js

@@ -1,5 +1,5 @@
 import "./header.css";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { forwardRef, createContext, useContext } from 'react';
 import { NavMain } from '../nav-main/index.js';
@@ -17,10 +17,10 @@ import '../nav-dropdown/index.js';
 import '../nav-flyout/index.js';
 import '@kickstartds/base/lib/picture';
 
-const HeaderContextDefault = forwardRef(({ logo, floating, inverted = false, flyoutInverted = false, dropdownInverted = false, navItems = [], }, ref) => (jsx("header", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), ref: ref, children: jsxs("div", { className: "dsa-header__content", children: [jsx(Logo, { ...logo, className: "dsa-header__logo", inverted: inverted }), jsx(NavMain, { flyoutInverted: flyoutInverted, dropdownInverted: dropdownInverted, items: navItems, logo: {
-                    ...logo,
-                    inverted: flyoutInverted,
-                } })] }) })));
+const HeaderContextDefault = forwardRef(({ logo, floating, inverted = false, flyoutInverted = false, dropdownInverted = false, navItems = [], }, ref) => (jsxs(Fragment, { children: [jsx("header", { className: classnames("dsa-header", floating && `dsa-header--floating`), "ks-inverted": inverted.toString(), ref: ref, children: jsxs("div", { className: "dsa-header__content", children: [jsx(Logo, { ...logo, className: "dsa-header__logo", inverted: inverted }), jsx(NavMain, { flyoutInverted: flyoutInverted, dropdownInverted: dropdownInverted, items: navItems, logo: {
+                            ...logo,
+                            inverted: flyoutInverted,
+                        } })] }) }), floating && jsx("div", { className: "dsa-header--overlay" })] })));
 const HeaderContext = createContext(HeaderContextDefault);
 const Header = forwardRef((props, ref) => {
     const Component = useContext(HeaderContext);

package/dist/components/hero/hero.css

@@ -14,8 +14,8 @@
   --dsa-hero__copy--font: var(--dsa-rich-text--font);
   --dsa-hero_highlight-text__copy--font: var(--ks-font-copy-l);
   --dsa-hero_color-neutral__copy--color: var(--ks-text-color-default);
-  --dsa-hero__textbox--background-color: var(--dsa-overlay--background-color);
-  --dsa-hero__textbox--backdrop-filter: var(--dsa-overlay--backdrop-filter);
+  --dsa-hero__textbox--background-color: var(--dsa-overlay-box--background-color);
+  --dsa-hero__textbox--backdrop-filter: var(--dsa-overlay-box--backdrop-filter);
   --dsa-hero__textbox--box-shadow: none;
   --dsa-hero__textbox--border-radius: var(--ks-border-radius-card);
   --dsa-hero__textbox--max-width: calc(var(--dsa-content--width_narrow) * 1.15);
@@ -53,7 +53,7 @@
   min-height: var(--dsa-hero--min-height);
 }
 .c-visual.dsa-hero .c-visual__box {
-  --c-visual_box--background: var(--dsa-hero__textbox--background-color, var(--dsa-overlay--background-color));
+  --c-visual_box--background: var(--dsa-hero__textbox--background-color, var(--dsa-overlay-box--background-color));
   --c-visual_box--color: var(--dsa-hero__copy--color, var(--ks-text-color-default));
   --c-visual_box--border-radius: var(--dsa-hero__textbox--border-radius, var(--ks-border-radius-card));
   --c-visual_box--padding: var(--dsa-hero__textbox--padding, var(--ks-spacing-inset-squish-xl));
@@ -88,7 +88,7 @@
     --c-visual_box--max-width: var(--dsa-hero__textbox--max-width, var(--dsa-content--width_narrow));
   }
   .c-visual.dsa-hero .c-visual__box:not(.c-visual__box--transparent) {
-    backdrop-filter: var(--dsa-hero__textbox--backdrop-filter, var(--dsa-overlay--backdrop-filter));
+    backdrop-filter: var(--dsa-hero__textbox--backdrop-filter, var(--dsa-overlay-box--backdrop-filter));
     box-shadow: var(--dsa-hero__textbox--box-shadow, var(--ks-box-shadow-card));
   }
 }
@@ -113,6 +113,10 @@
 .c-visual.dsa-hero .c-visual__content--indent {
   max-width: var(--dsa-content--width_wide);
 }
+.c-visual.dsa-hero .c-visual__continue-btn {
+  color: var(--dsa-overlay-text--text-color, var(--ks-color-fg));
+  filter: drop-shadow(var(--dsa-overlay-text--shadow, 0 0 10px var(--ks-color-bg-inverted-alpha-3-base)));
+}
 @container visual (min-width: 640px) {
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media {
     position: relative;

package/dist/components/hero/hero.schema.dereffed.json

@@ -163,6 +163,12 @@
       "type": "string",
       "default": "bottom"
     },
+    "inverted": {
+      "type": "boolean",
+      "title": "Inverted",
+      "description": "Inverted color scheme for the box",
+      "default": false
+    },
     "type": {
       "const": "hero"
     }

package/dist/components/hero/hero.schema.json

@@ -76,6 +76,12 @@
       "enum": ["center", "below", "left", "right", "corner"],
       "type": "string",
       "default": "bottom"
+    },
+    "inverted": {
+      "type": "boolean",
+      "title": "Inverted",
+      "description": "Inverted color scheme for the box",
+      "default": false
     }
   },
   "additionalProperties": false

package/dist/components/hero/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { HeroProps } from "../../HeroProps-f704d270.js";
+import { HeroProps } from "../../HeroProps-aa4e6431.js";
 declare const HeroContextDefault: import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const HeroContext: import("react").Context<import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Hero: import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/hero/index.js

@@ -8,13 +8,13 @@ import { ButtonContext } from '@kickstartds/base/lib/button';
 import { useButtonGroup } from '../button-group/index.js';
 import '@kickstartds/base/lib/button-group';
 
-const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightText, textPosition = "center", colorNeutral, image, overlay, textbox, className, buttons = [], ...rest }, ref) => {
+const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightText, textPosition = "center", colorNeutral, inverted, image, overlay, textbox, className, buttons = [], ...rest }, ref) => {
     const ButtonGroup = useButtonGroup();
     return (jsx(ButtonContext.Provider
     // @ts-expect-error
     , { 
         // @ts-expect-error
-        value: ButtonGroup, children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { ...rest, ref: ref, className: classnames(`dsa-hero dsa-hero--content-${textPosition}`, highlightText ? `dsa-hero--highlight-text` : "", colorNeutral ? `dsa-hero--color-neutral` : "", className), height: height, overlay: overlay, box: {
+        value: ButtonGroup, children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { ...rest, ref: ref, className: classnames(`dsa-hero dsa-hero--content-${textPosition}`, highlightText ? `dsa-hero--highlight-text` : "", colorNeutral ? `dsa-hero--color-neutral` : "", className), height: height, overlay: overlay, skipButton: height === "fullScreen" ? true : false, inverted: true, box: {
                     background: textbox === true ? "solid" : "transparent",
                     enabled: true,
                     vertical: textPosition === "below" || textPosition === "corner"

package/dist/components/image-story/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-03ff6d21.js";
+import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
 declare const ImageStoryContextDefault: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const ImageStoryContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const ImageStory: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/index/index.d.ts

@@ -29,7 +29,7 @@ interface SettingsProps {
     seo: SeoProps;
     iconSprite?: IconSprite;
 }
-export * from "../../BlogPostProps-7caa223c.js";
-export * from "../../BlogOverviewProps-7caa223c.js";
-export * from "../../PageProps-7caa223c.js";
+export * from "../../BlogPostProps-d9decb7c.js";
+export * from "../../BlogOverviewProps-9f207f1c.js";
+export * from "../../PageProps-aa29c554.js";
 export { IconSprite, SettingsProps };

package/dist/components/nav-dropdown/nav-dropdown.css

@@ -1,5 +1,5 @@
 .dsa-nav-dropdown {
-  --dsa-nav-dropdown--padding: var(--ks-spacing-inset-stretch-xs);
+  --dsa-nav-dropdown--padding: var(--ks-spacing-xxs) var(--ks-spacing-xxs) var(--ks-spacing-m) var(--ks-spacing-xxs);
   --dsa-nav-dropdown--background: var(--ks-background-color-default);
   --dsa-nav-dropdown--border-radius: var(--ks-border-radius-card);
   --dsa-nav-dropdown--box-shadow: var(--ks-box-shadow-card);
@@ -8,10 +8,12 @@
   --dsa-nav-dropdown__label--color: var(--ks-color-fg);
   --dsa-nav-dropdown__label--color_hover: var(--ks-text-color-interface-interactive-hover);
   --dsa-nav-dropdown__label--color_active: var(--ks-text-color-interface-interactive-active);
+  --dsa-nav-dropdown__label--background-color_hover: var(--ks-color-fg-alpha-8);
+  --dsa-nav-dropdown__label--border-radius: var(--ks-border-radius-control);
   --dsa-nav-dropdown__label--font: var(--ks-font-interface-m);
   --dsa-nav-dropdown__label--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-nav-dropdown__label--font-weight_active: var(--ks-font-weight-bold);
-  --dsa-nav-dropdown__label--padding: 0.35em 0.25em;
+  --dsa-nav-dropdown__label--padding: 0.45em 0.75em;
   --dsa-nav-dropdown__label_dimmed--opacity: 0.75;
 }
 .dsa-nav-dropdown[ks-inverted=true] {
@@ -49,8 +51,10 @@
   display: block;
   padding: var(--dsa-nav-dropdown__label--padding);
   text-align: left;
+  border-radius: var(--dsa-nav-dropdown__label--border-radius);
 }
 .dsa-nav-dropdown .dsa-nav-dropdown__label:hover, .dsa-nav-dropdown .dsa-nav-dropdown__label:focus, .dsa-nav-dropdown .dsa-nav-dropdown__label:active {
   color: var(--dsa-nav-dropdown__label--color_hover);
+  background-color: var(--dsa-nav-dropdown__label--background-color_hover);
   text-decoration: var(--dsa-nav-dropdown__label--text-decoration_hover);
 }

package/dist/components/nav-flyout/index.js

@@ -1,16 +1,14 @@
 import "./nav-flyout.css";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { Link } from '@kickstartds/base/lib/link';
-import { Logo } from '../logo/index.js';
 import { forwardRef, createContext, useContext } from 'react';
-import '@kickstartds/base/lib/picture';
 
-const NavFlyoutContextDefault = forwardRef(({ items, inverted, logo }, ref) => items && items.length > 0 ? (jsxs("nav", { className: "dsa-nav-flyout", "ks-inverted": inverted.toString(), id: "dsa-nav-flyout", "aria-label": "Hauptnavigation", ref: ref, children: [jsx(Logo, { ...logo, className: "dsa-nav-flyout__logo" }), jsx("ul", { className: "dsa-nav-flyout__list", children: items.map(({ label, href, active, items: subItems }) => {
-                return (jsxs("li", { className: classnames("dsa-nav-flyout__item", active && "dsa-nav-flyout__item--active"), children: [subItems?.length ? (jsx("span", { tabIndex: 0, className: "dsa-nav-flyout__label", children: label })) : (jsx(Link, { href: href, className: `dsa-nav-flyout__label dsa-nav-flyout__link`, children: label })), subItems?.length ? (jsx("ul", { className: "dsa-nav-flyout__sublist", children: subItems.map(({ label, href, active }) => {
-                                return (jsx("li", { className: classnames("dsa-nav-flyout__item", active && "dsa-nav-flyout__item--active"), children: jsx(Link, { href: href, className: `dsa-nav-flyout__label dsa-nav-flyout__link`, children: label }) }, href));
-                            }) })) : null] }, href));
-            }) })] })) : null);
+const NavFlyoutContextDefault = forwardRef(({ items, inverted }, ref) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-flyout", "ks-inverted": inverted.toString(), id: "dsa-nav-flyout", "aria-label": "Hauptnavigation", ref: ref, children: jsx("ul", { className: "dsa-nav-flyout__list", children: items.map(({ label, href, active, items: subItems }) => {
+            return (jsxs("li", { className: classnames("dsa-nav-flyout__item", active && "dsa-nav-flyout__item--active"), children: [subItems?.length ? (jsx("span", { tabIndex: 0, className: "dsa-nav-flyout__label", children: label })) : (jsx(Link, { href: href, className: `dsa-nav-flyout__label dsa-nav-flyout__link`, children: label })), subItems?.length ? (jsx("ul", { className: "dsa-nav-flyout__sublist", children: subItems.map(({ label, href, active }) => {
+                            return (jsx("li", { className: classnames("dsa-nav-flyout__item", active && "dsa-nav-flyout__item--active"), children: jsx(Link, { href: href, className: `dsa-nav-flyout__label dsa-nav-flyout__link`, children: label }) }, href));
+                        }) })) : null] }, href));
+        }) }) })) : null);
 const NavFlyoutContext = createContext(NavFlyoutContextDefault);
 const NavFlyout = forwardRef((props, ref) => {
     const Component = useContext(NavFlyoutContext);

package/dist/components/nav-flyout/nav-flyout.css

@@ -1,7 +1,7 @@
 .dsa-nav-flyout {
   --dsa-nav-flyout--padding: 0 var(--ks-spacing-inset-xl);
-  --dsa-nav-flyout--max-width: 18em;
-  --dsa-nav-flyout--shadow: 20px 0px 30px var(--ks-color-fg-inverted-alpha-5-base);
+  --dsa-nav-flyout--max-width: 100%;
+  --dsa-nav-flyout--shadow: 0px 0px 0px 100px var(--ks-color-fg-alpha-2-base);
   --dsa-nav-flyout--gap: var(--ks-spacing-stack-m);
   --dsa-nav-flyout--background: linear-gradient(
     125deg,
@@ -30,18 +30,18 @@
   font: var(--dsa-nav-flyout__label--font);
   flex-direction: column;
   gap: var(--dsa-nav-flyout--gap);
-  left: -100%;
-  height: 100vh;
+  top: var(--dsa-header--height);
+  opacity: 0;
+  left: 0;
   overflow: hidden;
   position: fixed;
-  width: 78vw;
+  width: 100%;
   transition: all var(--ks-duration-slow);
+  transition-delay: 100ms;
   padding: var(--dsa-nav-flyout--padding);
   right: 0;
   bottom: 0;
-  top: 0;
   overflow-y: auto;
-  background: var(--dsa-nav-flyout--background);
   backface-visibility: hidden;
   -webkit-overflow-scrolling: touch;
   max-width: var(--dsa-nav-flyout--max-width);
@@ -50,16 +50,19 @@
   padding: 0;
   margin: 0;
 }
+.dsa-header--floating .dsa-nav-flyout {
+  border-radius: var(--ks-border-radius-surface);
+  padding: 0 var(--dsa-header_floating--spacing-horizontal);
+}
 .overlay-open .dsa-nav-flyout {
-  left: 0;
-  box-shadow: var(--dsa-nav-flyout--shadow);
+  opacity: 1;
 }
 .dsa-nav-flyout .dsa-nav-flyout__logo {
   margin-top: var(--dsa-header--spacing-vertical);
   margin-bottom: var(--dsa-header--spacing-vertical);
 }
 .dsa-nav-flyout .dsa-nav-flyout__list {
-  padding-top: calc(var(--dsa-header--spacing-vertical) - var(--ks-spacing-s));
+  padding-top: var(--ks-spacing-xs);
   padding-bottom: 15vh;
 }
 .dsa-nav-flyout .dsa-nav-flyout__list:hover .dsa-nav-flyout__item:not(:hover, .dsa-nav-flyout__item--active) .dsa-nav-flyout__label {
@@ -94,6 +97,7 @@
 .dsa-nav-flyout .dsa-nav-flyout__sublist {
   padding: var(--dsa-nav-flyout__sublist--padding);
   font: var(--dsa-nav-flyout__sublist__label--font);
+  font-weight: var(--dsa-nav-flyout__sublist__label--font-weight);
 }
 .dsa-nav-flyout .dsa-nav-flyout__sublist .dsa-nav-flyout__label {
   font: inherit;

package/dist/components/nav-main/index.js

@@ -13,8 +13,6 @@ import 'classnames';
 import '@kickstartds/base/lib/link';
 import '@kickstartds/base/lib/icon';
 import '../nav-dropdown/index.js';
-import '../logo/index.js';
-import '@kickstartds/base/lib/picture';
 
 const NavMainContextDefault = forwardRef(({ logo, items, flyoutInverted, dropdownInverted }, ref) => items && items.length > 0 ? (jsxs("div", { ref: ref, className: "dsa-nav-main", children: [jsx(NavToggle, {}), jsx(NavTopbar, { items: items, inverted: dropdownInverted }), jsx(NavFlyout, { items: items, inverted: flyoutInverted, logo: logo })] })) : null);
 const NavMainContext = createContext(NavMainContextDefault);

package/dist/components/page/index.d.ts

@@ -1,4 +1,4 @@
-import { PageProps } from "../../PageProps-7caa223c.js";
+import { PageProps } from "../../PageProps-aa29c554.js";
 import { FC, PropsWithChildren } from "react";
 declare const Page: FC<PropsWithChildren<PageProps>>;
 export type { PageProps };

package/dist/components/page/page.schema.dereffed.json

@@ -879,6 +879,12 @@
                       "type": "string",
                       "default": "bottom"
                     },
+                    "inverted": {
+                      "type": "boolean",
+                      "title": "Inverted",
+                      "description": "Inverted color scheme for the box",
+                      "default": false
+                    },
                     "type": {
                       "const": "hero"
                     }
@@ -2075,6 +2081,12 @@
                                 "type": "string",
                                 "default": "bottom"
                               },
+                              "inverted": {
+                                "type": "boolean",
+                                "title": "Inverted",
+                                "description": "Inverted color scheme for the box",
+                                "default": false
+                              },
                               "type": {
                                 "const": "hero"
                               }
@@ -3102,8 +3114,10 @@
                       "description": "Choose the alginment of the module content",
                       "enum": [
                         "center",
+                        "below",
                         "left",
-                        "right"
+                        "right",
+                        "corner"
                       ],
                       "type": "string",
                       "default": "bottom"