@kickstartds/ds-agency-premium 1.3.30--canary.553.cf58b54.0 → 1.3.30

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

@@ -12,8 +12,8 @@ import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { HeaderProps } from "../../HeaderProps-c41aeb76.js";
-import { FooterProps } from "../../FooterProps-9f94ed98.js";
+import { HeaderProps } from "../../HeaderProps-7be94a61.js";
+import { FooterProps } from "../../FooterProps-10c950a6.js";
 /**
  * Collection of sections (with their contents) to render on the page
  */
@@ -72,6 +72,6 @@ interface SettingsProps {
      */
     seo: SeoProps;
 }
-export * from "../../BlogPostProps-e1cbd5d3.js";
-export * from "../../BlogOverviewProps-525f7f9f.js";
+export * from "../../BlogPostProps-0910f130.js";
+export * from "../../BlogOverviewProps-f385fc47.js";
 export { Sections, ToggleFloating, ToggleInverted, ToggleInverted1, PageProps, Header, Footer, SettingsProps };

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

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { LogoProps } from "../../LogoProps-01796f0a.js";
+declare const Logo: FC<LogoProps>;
+export { Logo };

package/dist/components/logo/index.js

@@ -0,0 +1,10 @@
+import "./logo.css";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { Picture } from '@kickstartds/base/lib/picture';
+import { Link } from '@kickstartds/base/lib/link';
+
+const Logo = ({ src, srcInverted = "/", alt, inverted = false, width, height, homepageHref, className, }) => (jsx(Fragment, { children: jsx(Link, { className: classnames("dsa-logo", className), href: homepageHref, children: jsx(Picture, { className: "dsa-logo__img", src: inverted === false ? src : srcInverted, alt: alt, width: width, height: height }) }) }));
+Logo.displayName = "Logo";
+
+export { Logo };

package/dist/components/logo/logo.css

@@ -0,0 +1,7 @@
+.dsa-logo {
+  display: block;
+}
+.dsa-logo__img {
+  height: var(--dsa-logo--height);
+  width: auto;
+}

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

@@ -2,37 +2,61 @@
   "$schema": "http://json-schema.org/draft-07/schema#",
   "$id": "http://schema.mydesignsystem.com/logo.schema.json",
   "title": "Logo",
-  "description": "Logo entry for Logos component",
   "type": "object",
   "properties": {
     "src": {
+      "title": "Source",
+      "description": "Picture source",
       "type": "string",
-      "format": "image",
-      "title": "URL",
-      "description": "The URL of the logo image",
-      "examples": [
-        "img/logos/logoipsum-212.svg",
-        "img/logos/logoipsum-217.svg",
-        "img/logos/logoipsum-239.svg",
-        "img/logos/logoipsum-244.svg",
-        "img/logos/logoipsum-250.svg",
-        "img/logos/logoipsum-286.svg"
-      ]
+      "format": "image"
+    },
+    "srcInverted": {
+      "title": "Source",
+      "description": "Picture source",
+      "type": "string",
+      "format": "image"
     },
     "alt": {
+      "title": "Alt text",
+      "description": "Alt text to display for picture",
+      "type": "string"
+    },
+    "homepageHref": {
       "type": "string",
-      "title": "Caption",
-      "description": "The alt text of the logo",
+      "format": "uri",
+      "default": "/"
+    },
+    "inverted": {
+      "type": "boolean",
+      "title": "Inverted",
+      "description": "Toggle wether the inverted or default version of the logo is being displayed"
+    },
+    "width": {
+      "title": "Width",
+      "description": "Width of the picture",
+      "type": "integer",
+      "minimum": 0,
       "examples": [
-        "Logo 1"
+        300
       ]
     },
+    "height": {
+      "title": "Height",
+      "description": "Height of the picture",
+      "type": "integer",
+      "minimum": 0,
+      "examples": [
+        300
+      ]
+    },
+    "className": {
+      "title": "Additional Classes",
+      "description": "Add additional css classes that should be applied to the logo",
+      "type": "string"
+    },
     "type": {
       "const": "logo"
     }
   },
-  "additionalProperties": false,
-  "required": [
-    "src"
-  ]
+  "additionalProperties": false
 }

package/dist/components/logo/logo.schema.json

@@ -2,30 +2,54 @@
   "$schema": "http://json-schema.org/draft-07/schema#",
   "$id": "http://schema.mydesignsystem.com/logo.schema.json",
   "title": "Logo",
-  "description": "Logo entry for Logos component",
   "type": "object",
   "properties": {
     "src": {
+      "title": "Source",
+      "description": "Picture source",
       "type": "string",
-      "format": "image",
-      "title": "URL",
-      "description": "The URL of the logo image",
-      "examples": [
-        "img/logos/logoipsum-212.svg",
-        "img/logos/logoipsum-217.svg",
-        "img/logos/logoipsum-239.svg",
-        "img/logos/logoipsum-244.svg",
-        "img/logos/logoipsum-250.svg",
-        "img/logos/logoipsum-286.svg"
-      ]
+      "format": "image"
+    },
+    "srcInverted": {
+      "title": "Source",
+      "description": "Picture source",
+      "type": "string",
+      "format": "image"
     },
     "alt": {
+      "title": "Alt text",
+      "description": "Alt text to display for picture",
+      "type": "string"
+    },
+    "homepageHref": {
       "type": "string",
-      "title": "Caption",
-      "description": "The alt text of the logo",
-      "examples": ["Logo 1"]
+      "format": "uri",
+      "default": "/"
+    },
+    "inverted": {
+      "type": "boolean",
+      "title": "Inverted",
+      "description": "Toggle wether the inverted or default version of the logo is being displayed"
+    },
+    "width": {
+      "title": "Width",
+      "description": "Width of the picture",
+      "type": "integer",
+      "minimum": 0,
+      "examples": [300]
+    },
+    "height": {
+      "title": "Height",
+      "description": "Height of the picture",
+      "type": "integer",
+      "minimum": 0,
+      "examples": [300]
+    },
+    "className": {
+      "title": "Additional Classes",
+      "description": "Add additional css classes that should be applied to the logo",
+      "type": "string"
     }
   },
-  "additionalProperties": false,
-  "required": ["src"]
+  "additionalProperties": false
 }

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { LogosProps } from "../../LogosProps-58c84ccc.js";
+import { LogosProps } from "../../LogosProps-f9474fe2.js";
 declare const LogosContextDefault: import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const LogosContext: import("react").Context<import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Logos: import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/logos/index.js

@@ -7,7 +7,7 @@ import { Button } from '@kickstartds/base/lib/button';
 import { Link } from '@kickstartds/base/lib/link';
 import { Container } from '@kickstartds/core/lib/container';
 
-const LogosContextDefault = forwardRef(({ logo: logos = [], tagline, align, cta, logosPerRow = "6", ...rest }, ref) => (jsx("div", { ...rest, ref: ref, children: jsx(Container, { name: "logos", children: jsxs("div", { className: classnames(`dsa-logos dsa-logos--align-${align}`), children: [jsx("div", { className: "dsa-logos__tagline", children: tagline }), jsx(LogoTiles, { className: classnames(`dsa-logo-tiles dsa-logo-tiles--cols-${logosPerRow}`), logos: logos }), cta?.toggle ? (jsxs("div", { className: "dsa-logos__cta", children: [jsxs("div", { className: "dsa-logos__cta__text", children: [cta?.text, cta?.style === "text" ? (jsxs(Fragment, { children: [" ", jsx(Link, { className: "dsa-logos__cta__link", href: cta.link, children: cta.label })] })) : ("")] }), cta?.style === "button" ? (jsx(Button, { href: cta.link, label: cta.label })) : ("")] })) : ("")] }) }) })));
+const LogosContextDefault = forwardRef(({ logo: logos = [], tagline, align, cta, logosPerRow = "6", ...rest }, ref) => (jsx("div", { ...rest, ref: ref, children: jsx(Container, { name: "logos", children: jsxs("div", { className: classnames(`dsa-logos dsa-logos--align-${align}`), children: [tagline && jsx("div", { className: "dsa-logos__tagline", children: tagline }), jsx(LogoTiles, { className: classnames(`dsa-logo-tiles dsa-logo-tiles--cols-${logosPerRow}`), logos: logos }), cta?.toggle ? (jsxs("div", { className: "dsa-logos__cta", children: [jsxs("div", { className: "dsa-logos__cta__text", children: [cta?.text, cta?.style === "text" ? (jsxs(Fragment, { children: [" ", jsx(Link, { className: "dsa-logos__cta__link", href: cta.link, children: cta.label })] })) : ("")] }), cta?.style === "button" ? (jsx(Button, { href: cta.link, label: cta.label })) : ("")] })) : ("")] }) }) })));
 const LogosContext = createContext(LogosContextDefault);
 const Logos = forwardRef((props, ref) => {
     const Component = useContext(LogosContext);

package/dist/components/logos/logos.css

@@ -5,9 +5,9 @@
 
 .dsa-logos {
   --dsa-logos-gap: var(--ks-spacing-stack-m);
-  --dsa-logos-tagline--font: var(--dsa-headline_h3--font);
-  --dsa-logos-tagline--font-weight: var(--dsa-headline--font-weight);
-  --dsa-logos-tagline--color: var(--dsa-headline--color);
+  --dsa-logos__tagline--font: var(--dsa-headline_h3--font);
+  --dsa-logos__tagline--font-weight: var(--dsa-headline--font-weight);
+  --dsa-logos__tagline--color: var(--dsa-headline--color);
   --dsa-logos__grid--gap-horizontal: var(--ks-spacing-inline-l);
   --dsa-logos__grid--gap-vertical: var(--ks-spacing-stack-s);
   --dsa-logos__grid_mobile--cols: 2;
@@ -19,11 +19,15 @@
   flex-direction: column;
   gap: var(--dsa-logos-gap, var(--ks-spacing-stack-m));
 }
+.dsa-logos .c-logo-tiles {
+  --c-logo-tiles--cols: var(--dsa-logo-tiles--cols);
+  --c-logo-tiles--gutter: var(--dsa-logos__grid--gap-horizontal);
+}
 .dsa-logos__tagline {
-  font: var(--dsa-logos-tagline--font, var(--ks-font-display-m));
-  font-weight: var(--dsa-logos-tagline--font-weight, var(--dsa-headline--font-weight));
+  font: var(--dsa-logos__tagline--font, var(--ks-font-display-m));
+  font-weight: var(--dsa-logos__tagline--font-weight, var(--dsa-headline--font-weight));
   max-width: var(--l-section--content-width-narrow);
-  color: var(--dsa-logos-tagline--color, var(--dsa-headline--color, var(--ks-text-color-display)));
+  color: var(--dsa-logos__tagline--color, var(--dsa-headline--color, var(--ks-text-color-display)));
   width: 100%;
 }
 .dsa-logos__cta {

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

@@ -18,8 +18,6 @@
       "title": "Logos",
       "description": "The logos to display",
       "items": {
-        "$schema": "http://json-schema.org/draft-07/schema#",
-        "$id": "http://schema.mydesignsystem.com/logo.schema.json",
         "title": "Logo",
         "description": "Logo entry for Logos component",
         "type": "object",
@@ -45,9 +43,6 @@
             "examples": [
               "Logo 1"
             ]
-          },
-          "type": {
-            "const": "logo"
           }
         },
         "additionalProperties": false,

package/dist/components/logos/logos.schema.json

@@ -16,7 +16,33 @@
       "title": "Logos",
       "description": "The logos to display",
       "items": {
-        "$ref": "http://schema.mydesignsystem.com/logo.schema.json"
+        "title": "Logo",
+        "description": "Logo entry for Logos component",
+        "type": "object",
+        "properties": {
+          "src": {
+            "type": "string",
+            "format": "image",
+            "title": "URL",
+            "description": "The URL of the logo image",
+            "examples": [
+              "img/logos/logoipsum-212.svg",
+              "img/logos/logoipsum-217.svg",
+              "img/logos/logoipsum-239.svg",
+              "img/logos/logoipsum-244.svg",
+              "img/logos/logoipsum-250.svg",
+              "img/logos/logoipsum-286.svg"
+            ]
+          },
+          "alt": {
+            "type": "string",
+            "title": "Caption",
+            "description": "The alt text of the logo",
+            "examples": ["Logo 1"]
+          }
+        },
+        "additionalProperties": false,
+        "required": ["src"]
       },
       "minItems": 1,
       "maxItems": 20

package/dist/components/nav-main/index.d.ts

@@ -5,52 +5,23 @@ import { FC } from "react";
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
+import { LogoProps } from "../../LogoProps-01796f0a.js";
 /**
- * Add a link to the logo
+ * Toggle the inversion of the flyout navigation
  */
-type Link = string;
-/**
- * Logo file source
- */
-type Source = string;
-/**
- * Logo inverted file source
- */
-type SourceInverted = string;
-/**
- * Alt text to display for picture
- */
-type AltText = string;
-/**
- * Width of the picture
- */
-type Width = number;
-/**
- * Height of the picture
- */
-type Height = number;
-/**
- * Toggle the inversion of the logo inside the mobile navigation
- */
-type FlyoutLogoInverted = boolean;
+type FlyoutInverted = boolean;
 interface NavMainProps {
-    logo: Logo;
-    logoHref?: string;
-    flyoutLogoInverted?: FlyoutLogoInverted;
+    /**
+     * Referenced component LogoProps
+     */
+    logo: LogoProps;
+    flyoutInverted?: FlyoutInverted;
     items?: {
         href: string;
         label: string;
         active?: boolean;
     }[];
 }
-interface Logo {
-    href?: Link;
-    src?: Source;
-    srcInverted?: SourceInverted;
-    alt?: AltText;
-    width?: Width;
-    height?: Height;
-}
 declare const NavToggleComponent: FC;
 declare const NavMainItem: FC<{
     label: string;

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

@@ -4,15 +4,16 @@ import { createElement } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { Link } from '@kickstartds/base/lib/link';
-import { Picture } from '@kickstartds/base/lib/picture';
+import { Logo } from '../logo/index.js';
 import './js/NavToggle.client.js';
 import './js/navMainEvents.client.js';
+import '@kickstartds/base/lib/picture';
 import '@kickstartds/core/lib/component';
 import './js/body.client.js';
 import '@kickstartds/core/lib/core';
 
 const NavToggleComponent = () => (jsxs("button", { type: "button", className: "dsa-nav-toggle", id: "toggle-sidebar", "aria-controls": "nav-main", "aria-expanded": "false", "ks-component": "base.nav-toggle", children: [jsx("span", { className: "dsa-nav-toggle__label", children: "toggle navigation" }), jsx("span", { className: "dsa-nav-toggle__icon", children: jsx("span", { className: "dsa-nav-toggle__icon__middle" }) })] }));
 const NavMainItem = ({ label, href, active }) => (jsx("li", { className: classnames("dsa-nav-main__item", active === true ? "dsa-nav-main__item--active" : ""), children: jsx(Link, { className: "dsa-nav-main__link", href: href, children: label }) }));
-const NavMain = ({ logo, items, flyoutLogoInverted, }) => items && items.length > 0 ? (jsxs("div", { className: "dsa-nav-main__wrap", children: [jsx(NavToggleComponent, {}), jsxs("nav", { className: classnames("dsa-nav-main", items.some((item) => item.active) ? "dsa-nav-main--active" : ""), id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: [jsxs(Link, { className: "dsa-nav-main__logo", "ks-inverted": flyoutLogoInverted === true ? "true" : "false", href: logo?.href, children: [jsx(Picture, { className: "dsa-nav-main__logo__img", src: logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: flyoutLogoInverted }), jsx(Picture, { className: "dsa-nav-main__logo__img dsa-nav-main__logo__img--inverted", src: logo?.srcInverted || logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: !flyoutLogoInverted })] }), jsx("ul", { className: "dsa-nav-main__list", children: items.map((item) => (createElement(NavMainItem, { ...item, active: item.active ?? false, key: item.href + item.label }))) })] })] })) : null;
+const NavMain = ({ logo, items, flyoutInverted }) => items && items.length > 0 ? (jsxs("div", { className: "dsa-nav-main__wrap", children: [jsx(NavToggleComponent, {}), jsxs("nav", { "ks-inverted": flyoutInverted.toString(), className: classnames("dsa-nav-main", "dsa-nav-main--flyout", items.some((item) => item.active) ? "dsa-nav-main--active" : ""), id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: [jsx(Logo, { ...logo, className: "dsa-nav-main__logo" }), jsx("ul", { className: "dsa-nav-main__list", children: items.map((item) => (createElement(NavMainItem, { ...item, active: item.active ?? false, key: item.href + item.label }))) })] }), jsxs("nav", { className: classnames("dsa-nav-main", "dsa-nav-main--topbar", items.some((item) => item.active) ? "dsa-nav-main--active" : ""), id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: [jsx(Logo, { ...logo, className: "dsa-nav-main__logo" }), jsx("ul", { className: "dsa-nav-main__list", children: items.map((item) => (createElement(NavMainItem, { ...item, active: item.active ?? false, key: item.href + item.label }))) })] })] })) : null;
 
 export { NavMain, NavMainItem, NavToggleComponent };

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

@@ -31,20 +31,10 @@
 .dsa-nav-main--active .dsa-nav-main__item .dsa-nav-main__link {
   color: var(--dsa-nav-main__link--color);
 }
-@media (min-width: 62rem) {
-  .dsa-header--floating .dsa-nav-main--active .dsa-nav-main__item .dsa-nav-main__link {
-    color: var(--dsa-nav-main_floating__link--color);
-  }
-}
 .dsa-nav-main--active .dsa-nav-main__item--active .dsa-nav-main__link {
   color: var(--dsa-nav-main__link--color_active);
   font-weight: var(--dsa-nav-main__link--font-weight_active);
 }
-@media (min-width: 62rem) {
-  .dsa-header--floating .dsa-nav-main--active .dsa-nav-main__item--active .dsa-nav-main__link {
-    color: var(--dsa-nav-main_floating__link--color_active);
-  }
-}
 .dsa-nav-main ul {
   /* critical:start */
   box-sizing: border-box;
@@ -63,11 +53,6 @@
 .dsa-nav-main__list:hover .dsa-nav-main__link {
   opacity: var(--dsa-nav-main__link--opacity_hover);
 }
-@media (min-width: 62rem) {
-  .dsa-header--floating .dsa-nav-main__list:hover .dsa-nav-main__link {
-    opacity: var(--dsa-nav-main_floating__link--opacity_hover);
-  }
-}
 .dsa-nav-main .dsa-nav-main__item a.dsa-nav-main__link {
   /* critical:start */
   font: var(--dsa-nav-main__link--font);
@@ -86,28 +71,18 @@
   color: var(--dsa-nav-main__link--color_active);
 }
 .dsa-nav-main__logo {
-  display: block;
   padding: var(--dsa-header--spacing-v) 0;
 }
-.dsa-nav-main__logo__img {
-  height: var(--dsa-header__logo--height);
-  width: auto;
-}
-[ks-inverted=true] .dsa-nav-main__logo__img {
-  display: none;
-}
-.dsa-nav-main__logo__img--inverted {
-  display: none;
-}
-[ks-inverted=true] .dsa-nav-main__logo__img--inverted {
-  display: block !important;
-}
 .dsa-nav-main__wrap {
   flex-grow: 0;
   flex-shrink: 1;
 }
+.dsa-nav-main.dsa-nav-main--flyout {
+  display: none;
+}
 @media (max-width: 62rem) {
-  .dsa-nav-main {
+  .dsa-nav-main.dsa-nav-main--flyout {
+    display: block;
     /* critical:start */
     left: -100%;
     /* critical:end */
@@ -127,7 +102,7 @@
     -webkit-overflow-scrolling: touch;
     box-shadow: 20px 0px 30px rgba(0, 0, 0, 0);
   }
-  .dsa-nav-main__item--icon {
+  .dsa-nav-main.dsa-nav-main--flyout__item--icon {
     border: 0;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(100%);
@@ -138,62 +113,75 @@
     white-space: nowrap;
     width: 1px;
   }
-  .overlay-open .dsa-nav-main {
+  .overlay-open .dsa-nav-main.dsa-nav-main--flyout {
     left: 0;
     box-shadow: var(--dsa-nav-main--shadow);
   }
-  .dsa-nav-main > .dsa-nav-main__logo {
+  .dsa-nav-main.dsa-nav-main--flyout > .dsa-nav-main__logo {
     margin-top: var(--dsa-header--spacing-vertical);
     margin-bottom: var(--dsa-header--spacing-vertical);
   }
-  .dsa-nav-main ul.dsa-nav-main__list {
+  .dsa-nav-main.dsa-nav-main--flyout ul.dsa-nav-main__list {
     padding-top: calc(var(--dsa-header--spacing-vertical) - var(--ks-spacing-s));
   }
-  .dsa-nav-main ul.dsa-nav-main__list .dsa-nav-main--button {
+  .dsa-nav-main.dsa-nav-main--flyout ul.dsa-nav-main__list .dsa-nav-main--button {
     margin-left: var(--dsa-header--spacing-horizontal);
     margin-top: var(--dsa-header--spacing-vertical);
   }
-  .dsa-nav-main ul.dsa-nav-main__list .dsa-nav-main--button .button {
+  .dsa-nav-main.dsa-nav-main--flyout ul.dsa-nav-main__list .dsa-nav-main--button .button {
     --button--font: var(--ks-font-interface-s);
   }
-  .dsa-nav-main ul.dsa-nav-main__list .dsa-nav-main--button .button .button__content {
+  .dsa-nav-main.dsa-nav-main--flyout ul.dsa-nav-main__list .dsa-nav-main--button .button .button__content {
     --button--padding: 0.4rem 1rem;
   }
 }
+.dsa-nav-main.dsa-nav-main--topbar {
+  display: none;
+}
 @media (min-width: 62rem) {
-  .dsa-nav-main {
+  .dsa-nav-main.dsa-nav-main--topbar {
+    display: block;
     /* critical:start */
     /* critical:end */
   }
-  .dsa-nav-main > .dsa-nav-main__logo {
+  .dsa-nav-main.dsa-nav-main--topbar > .dsa-nav-main__logo {
     display: none;
   }
-  .dsa-nav-main .button--wrapper {
+  .dsa-nav-main.dsa-nav-main--topbar .button--wrapper {
     margin-left: var(--ks-spacing-inline-xs);
   }
-  .dsa-nav-main__wrap {
+  .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__wrap {
     display: flex;
     align-items: center;
   }
-  .dsa-nav-main__list {
+  .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list {
     /* critical:start */
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     /* critical:end */
   }
-  .dsa-nav-main__list .dsa-nav-main--button .button {
+  .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list .dsa-nav-main--button .button {
     --button--font: var(--ks-font-interface-s);
   }
-  .dsa-nav-main__list .dsa-nav-main--button .button span {
+  .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list .dsa-nav-main--button .button span {
     font-size: 98%;
   }
-  .dsa-nav-main__item {
+  .dsa-header--floating .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list:hover .dsa-nav-main__link {
+    opacity: var(--dsa-nav-main_floating__link--opacity_hover);
+  }
+  .dsa-nav-main.dsa-nav-main--topbar.dsa-nav-main__item {
     /* critical:start */
     flex-shrink: 0;
     /* critical:end */
     outline: 0;
   }
+  .dsa-header--floating .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__link {
+    color: var(--dsa-nav-main_floating__link--color);
+  }
+  .dsa-header--floating .dsa-nav-main.dsa-nav-main--topbar.dsa-nav-main--active .dsa-nav-main__link {
+    color: var(--dsa-nav-main_floating__link--color_active);
+  }
 }
 
 .dsa-nav-main-toggle[aria-expanded=true] + .dsa-nav-main {

package/dist/components/nav-main/nav-main.schema.dereffed.json

@@ -5,39 +5,38 @@
   "type": "object",
   "properties": {
     "logo": {
+      "$schema": "http://json-schema.org/draft-07/schema#",
+      "$id": "http://schema.mydesignsystem.com/logo.schema.json",
       "title": "Logo",
       "type": "object",
       "properties": {
-        "href": {
-          "title": "Link",
-          "description": "Add a link to the logo",
-          "type": "string",
-          "format": "uri",
-          "default": "/"
-        },
         "src": {
           "title": "Source",
-          "description": "Logo file source",
+          "description": "Picture source",
           "type": "string",
-          "format": "image",
-          "examples": [
-            "logo.svg"
-          ]
+          "format": "image"
         },
         "srcInverted": {
-          "title": "Source Inverted",
-          "description": "Logo inverted file source",
+          "title": "Source",
+          "description": "Picture source",
           "type": "string",
-          "format": "image",
-          "examples": [
-            "logo-inverted.svg"
-          ]
+          "format": "image"
         },
         "alt": {
           "title": "Alt text",
           "description": "Alt text to display for picture",
           "type": "string"
         },
+        "homepageHref": {
+          "type": "string",
+          "format": "uri",
+          "default": "/"
+        },
+        "inverted": {
+          "type": "boolean",
+          "title": "Inverted",
+          "description": "Toggle wether the inverted or default version of the logo is being displayed"
+        },
         "width": {
           "title": "Width",
           "description": "Width of the picture",
@@ -55,19 +54,22 @@
           "examples": [
             300
           ]
+        },
+        "className": {
+          "title": "Additional Classes",
+          "description": "Add additional css classes that should be applied to the logo",
+          "type": "string"
+        },
+        "type": {
+          "const": "logo"
         }
       },
       "additionalProperties": false
     },
-    "logoHref": {
-      "type": "string",
-      "format": "uri",
-      "default": "/"
-    },
-    "flyoutLogoInverted": {
+    "flyoutInverted": {
       "type": "boolean",
-      "title": "Flyout Logo Inverted",
-      "description": "Toggle the inversion of the logo inside the mobile navigation",
+      "title": "Flyout Inverted",
+      "description": "Toggle the inversion of the flyout navigation",
       "default": false
     },
     "items": {