@kickstartds/ds-agency-premium 1.3.23 → 1.3.24

package/dist/{HeaderProps-7a7ece57.d.ts → HeaderProps-c41aeb76.d.ts}

@@ -3,6 +3,10 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
+/**
+ * Add a link to the logo
+ */
+type Link = string;
 /**
  * Logo file source
  */
@@ -23,6 +27,10 @@ type Width = number;
  * Height of the picture
  */
 type Height = number;
+/**
+ * Toggle the inversion of the logo inside the mobile navigation
+ */
+type FlyoutLogoInverted = boolean;
 /**
  * Make the header float over the first Section
  */
@@ -34,6 +42,7 @@ type Inverted = boolean;
 interface HeaderProps {
     logo: Logo;
     logoHref?: string;
+    flyoutLogoInverted?: FlyoutLogoInverted;
     floating?: Floating;
     inverted?: Inverted;
     navItems?: {
@@ -43,10 +52,11 @@ interface HeaderProps {
     }[];
 }
 interface Logo {
+    href?: Link;
     src?: Source;
     srcInverted?: SourceInverted;
     alt?: AltText;
     width?: Width;
     height?: Height;
 }
-export { Source, SourceInverted, AltText, Width, Height, Floating, Inverted, HeaderProps, Logo };
+export { Link, Source, SourceInverted, AltText, Width, Height, FlyoutLogoInverted, Floating, Inverted, HeaderProps, Logo };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogPostProps } from "../../BlogPostProps-0910f130.js";
+import { BlogPostProps } from "../../BlogPostProps-e1cbd5d3.js";
 declare const BlogPost: {
     ({ head, content, aside, cta }: BlogPostProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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

@@ -8,6 +8,13 @@
       "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",
@@ -57,6 +64,12 @@
       "format": "uri",
       "default": "/"
     },
+    "flyoutLogoInverted": {
+      "type": "boolean",
+      "title": "Flyout Logo Inverted",
+      "description": "Toggle the inversion of the logo inside the mobile navigation",
+      "default": false
+    },
     "floating": {
       "type": "boolean",
       "title": "Floating",

package/dist/components/header/header.schema.json

@@ -5,48 +5,14 @@
   "type": "object",
   "properties": {
     "logo": {
-      "title": "Logo",
-      "type": "object",
-      "properties": {
-        "src": {
-          "title": "Source",
-          "description": "Logo file source",
-          "type": "string",
-          "format": "image",
-          "examples": ["logo.svg"]
-        },
-        "srcInverted": {
-          "title": "Source Inverted",
-          "description": "Logo inverted file source",
-          "type": "string",
-          "format": "image",
-          "examples": ["logo-inverted.svg"]
-        },
-        "alt": {
-          "title": "Alt text",
-          "description": "Alt text to display for picture",
-          "type": "string"
-        },
-        "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]
-        }
-      },
-      "additionalProperties": false
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/logo"
     },
     "logoHref": {
       "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/logoHref"
     },
+    "flyoutLogoInverted": {
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/flyoutLogoInverted"
+    },
     "floating": {
       "type": "boolean",
       "title": "Floating",

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

@@ -1,4 +1,4 @@
 import { FC } from "react";
-import { HeaderProps } from "../../HeaderProps-7a7ece57.js";
+import { HeaderProps } from "../../HeaderProps-c41aeb76.js";
 declare const Header: FC<HeaderProps>;
 export { Header };

package/dist/components/header/index.js

@@ -11,7 +11,7 @@ import '../nav-main/js/navMainEvents.client.js';
 import '@kickstartds/core/lib/core';
 import '../nav-main/js/body.client.js';
 
-const Header = ({ logo, logoHref = "/", floating, inverted = false, navItems = [], }) => (jsx(Fragment, { children: jsx("div", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), children: jsxs("div", { className: "dsa-header__content", children: [jsxs(Link, { className: "dsa-header__logo", href: logoHref, children: [jsx(Picture, { className: "dsa-header__logo__img", src: logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: inverted }), jsx(Picture, { className: "dsa-header__logo__img dsa-header__logo__img--inverted", src: logo?.srcInverted || logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: !inverted })] }), jsx(NavMain, { logo: logo, logoHref: logoHref, items: navItems })] }) }) }));
+const Header = ({ logo, logoHref = "/", floating, inverted = false, flyoutLogoInverted = false, navItems = [], }) => (jsx(Fragment, { children: jsx("div", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), children: jsxs("div", { className: "dsa-header__content", children: [jsxs(Link, { className: "dsa-header__logo", href: logoHref, children: [jsx(Picture, { className: "dsa-header__logo__img", src: logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: inverted }), jsx(Picture, { className: "dsa-header__logo__img dsa-header__logo__img--inverted", src: logo?.srcInverted || logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: !inverted })] }), jsx(NavMain, { flyoutLogoInverted: flyoutLogoInverted, logo: logo, logoHref: logoHref, items: navItems })] }) }) }));
 Header.displayName = "Header";
 
 export { Header };

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

@@ -12,7 +12,7 @@ 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-7a7ece57.js";
+import { HeaderProps } from "../../HeaderProps-c41aeb76.js";
 import { FooterProps } from "../../FooterProps-9f94ed98.js";
 /**
  * Collection of sections (with their contents) to render on the page
@@ -72,6 +72,6 @@ interface SettingsProps {
      */
     seo: SeoProps;
 }
-export * from "../../BlogPostProps-0910f130.js";
+export * from "../../BlogPostProps-e1cbd5d3.js";
 export * from "../../BlogOverviewProps-f385fc47.js";
 export { Sections, ToggleFloating, ToggleInverted, ToggleInverted1, PageProps, Header, Footer, SettingsProps };

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

@@ -5,19 +5,52 @@ 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 { PictureProps } from "@kickstartds/base/lib/picture/typing";
+/**
+ * Add a link to the logo
+ */
+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;
 interface NavMainProps {
-    /**
-     * Referenced component PictureProps
-     */
-    logo: PictureProps;
+    logo: Logo;
     logoHref?: string;
+    flyoutLogoInverted?: FlyoutLogoInverted;
     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

@@ -11,8 +11,8 @@ import '@kickstartds/core/lib/component';
 import './js/body.client.js';
 import '@kickstartds/core/lib/core';
 
-const NavToggleComponent = () => (jsxs("button", { type: "button", className: "nav-toggle", id: "toggle-sidebar", "aria-controls": "nav-main", "aria-expanded": "false", "ks-component": "base.nav-toggle", children: [jsx("span", { className: "nav-toggle__label", children: "toggle navigation" }), jsx("span", { className: "nav-toggle__icon", children: jsx("span", { className: "nav-toggle__icon__middle" }) })] }));
-const NavMainItem = ({ label, href, active }) => (jsx("li", { className: classnames("nav-main__item", active === true ? "nav-main__item--active" : ""), children: jsx(Link, { className: "nav-main__link", href: href, children: label }) }));
-const NavMain = ({ logo, logoHref = "/", items }) => items && items.length > 0 ? (jsxs("div", { className: "nav-main__wrap", children: [jsx(NavToggleComponent, {}), jsxs("nav", { className: classnames("nav-main", items.some((item) => item.active) ? "nav-main--active" : ""), id: "nav-main", "aria-label": "Hauptnavigation", children: [jsx(Link, { className: "nav-main__logo", href: logoHref, children: jsx(Picture, { ...logo }) }), jsx("ul", { className: "nav-main__list", children: items.map((item) => (createElement(NavMainItem, { ...item, active: item.active ?? false, key: item.href + item.label }))) })] })] })) : null;
+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;
 
 export { NavMain, NavMainItem, NavToggleComponent };

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

@@ -1,4 +1,4 @@
-.nav-main {
+.dsa-nav-main {
   --dsa-nav-main--background: linear-gradient(
     125deg,
     var(--ks-background-color-default),
@@ -17,35 +17,35 @@
   --dsa-nav-main--shadow: 50px 0px 50px 50px rgba(0, 0, 0, 0.539);
 }
 @media (min-width: 62rem) {
-  .nav-main {
+  .dsa-nav-main {
     --dsa-nav-main__link--padding: 0 0.75em;
     --dsa-nav-main__link--font: var(--ks-font-interface-m);
   }
 }
 
-.nav-main {
+.dsa-nav-main {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 }
-.nav-main--active .nav-main__item .nav-main__link {
+.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 .nav-main--active .nav-main__item .nav-main__link {
+  .dsa-header--floating .dsa-nav-main--active .dsa-nav-main__item .dsa-nav-main__link {
     color: var(--dsa-nav-main_floating__link--color);
   }
 }
-.nav-main--active .nav-main__item--active .nav-main__link {
+.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 .nav-main--active .nav-main__item--active .nav-main__link {
+  .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);
   }
 }
-.nav-main ul {
+.dsa-nav-main ul {
   /* critical:start */
   box-sizing: border-box;
   margin: 0;
@@ -53,22 +53,22 @@
   list-style: none;
   /* critical:end */
 }
-.nav-main ul li {
+.dsa-nav-main ul li {
   display: block;
   margin: 0;
 }
-.nav-main__item {
+.dsa-nav-main__item {
   position: relative;
 }
-.nav-main__list:hover .nav-main__link {
+.dsa-nav-main__list:hover .dsa-nav-main__link {
   opacity: var(--dsa-nav-main__link--opacity_hover);
 }
 @media (min-width: 62rem) {
-  .dsa-header--floating .nav-main__list:hover .nav-main__link {
+  .dsa-header--floating .dsa-nav-main__list:hover .dsa-nav-main__link {
     opacity: var(--dsa-nav-main_floating__link--opacity_hover);
   }
 }
-.nav-main .nav-main__item a.nav-main__link {
+.dsa-nav-main .dsa-nav-main__item a.dsa-nav-main__link {
   /* critical:start */
   font: var(--dsa-nav-main__link--font);
   font-weight: var(--dsa-nav-main__link--font-weight);
@@ -78,26 +78,36 @@
   padding: var(--dsa-nav-main__link--padding);
   /* critical:end */
 }
-.nav-main .nav-main__item a.nav-main__link:hover {
+.dsa-nav-main .dsa-nav-main__item a.dsa-nav-main__link:hover {
   opacity: 1;
   color: var(--dsa-nav-main__link--color_active);
 }
-.nav-main .nav-main__item a.nav-main__link:active {
+.dsa-nav-main .dsa-nav-main__item a.dsa-nav-main__link:active {
   color: var(--dsa-nav-main__link--color_active);
 }
-.nav-main__logo {
+.dsa-nav-main__logo {
+  display: block;
   padding: var(--dsa-header--spacing-v) 0;
 }
-.nav-main__logo img {
-  height: var(--dsa-logo--height);
+.dsa-nav-main__logo__img {
+  height: var(--dsa-header__logo--height);
   width: auto;
 }
-.nav-main__wrap {
+[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;
 }
 @media (max-width: 62rem) {
-  .nav-main {
+  .dsa-nav-main {
     /* critical:start */
     left: -100%;
     /* critical:end */
@@ -117,7 +127,7 @@
     -webkit-overflow-scrolling: touch;
     box-shadow: 20px 0px 30px rgba(0, 0, 0, 0);
   }
-  .nav-main__item--icon {
+  .dsa-nav-main__item--icon {
     border: 0;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(100%);
@@ -128,57 +138,57 @@
     white-space: nowrap;
     width: 1px;
   }
-  .overlay-open .nav-main {
+  .overlay-open .dsa-nav-main {
     left: 0;
     box-shadow: var(--dsa-nav-main--shadow);
   }
-  .nav-main > .nav-main__logo {
+  .dsa-nav-main > .dsa-nav-main__logo {
     margin-top: var(--dsa-header--spacing-vertical);
     margin-bottom: var(--dsa-header--spacing-vertical);
   }
-  .nav-main ul.nav-main__list {
+  .dsa-nav-main ul.dsa-nav-main__list {
     padding-top: calc(var(--dsa-header--spacing-vertical) - var(--ks-spacing-s));
   }
-  .nav-main ul.nav-main__list .nav-main--button {
+  .dsa-nav-main ul.dsa-nav-main__list .dsa-nav-main--button {
     margin-left: var(--dsa-header--spacing-horizontal);
     margin-top: var(--dsa-header--spacing-vertical);
   }
-  .nav-main ul.nav-main__list .nav-main--button .button {
+  .dsa-nav-main ul.dsa-nav-main__list .dsa-nav-main--button .button {
     --button--font: var(--ks-font-interface-s);
   }
-  .nav-main ul.nav-main__list .nav-main--button .button .button__content {
+  .dsa-nav-main ul.dsa-nav-main__list .dsa-nav-main--button .button .button__content {
     --button--padding: 0.4rem 1rem;
   }
 }
 @media (min-width: 62rem) {
-  .nav-main {
+  .dsa-nav-main {
     /* critical:start */
     /* critical:end */
   }
-  .nav-main > .nav-main__logo {
+  .dsa-nav-main > .dsa-nav-main__logo {
     display: none;
   }
-  .nav-main .button--wrapper {
+  .dsa-nav-main .button--wrapper {
     margin-left: var(--ks-spacing-inline-xs);
   }
-  .nav-main__wrap {
+  .dsa-nav-main__wrap {
     display: flex;
     align-items: center;
   }
-  .nav-main__list {
+  .dsa-nav-main__list {
     /* critical:start */
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     /* critical:end */
   }
-  .nav-main__list .nav-main--button .button {
+  .dsa-nav-main__list .dsa-nav-main--button .button {
     --button--font: var(--ks-font-interface-s);
   }
-  .nav-main__list .nav-main--button .button span {
+  .dsa-nav-main__list .dsa-nav-main--button .button span {
     font-size: 98%;
   }
-  .nav-main__item {
+  .dsa-nav-main__item {
     /* critical:start */
     flex-shrink: 0;
     /* critical:end */
@@ -186,6 +196,6 @@
   }
 }
 
-.nav-main-toggle[aria-expanded=true] + .nav-main {
+.dsa-nav-main-toggle[aria-expanded=true] + .dsa-nav-main {
   display: block;
 }

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

@@ -5,26 +5,33 @@
   "type": "object",
   "properties": {
     "logo": {
-      "$schema": "http://json-schema.org/draft-07/schema#",
-      "$id": "http://schema.kickstartds.com/base/picture.schema.json",
-      "title": "Picture",
-      "description": "Base component to display a picture",
+      "title": "Logo",
       "type": "object",
       "properties": {
+        "href": {
+          "title": "Link",
+          "description": "Add a link to the logo",
+          "type": "string",
+          "format": "uri",
+          "default": "/"
+        },
         "src": {
           "title": "Source",
-          "description": "Picture source",
+          "description": "Logo file source",
           "type": "string",
           "format": "image",
           "examples": [
-            "https://picsum.photos/seed/kdspicture/300/300"
+            "logo.svg"
           ]
         },
-        "srcSet": {
-          "title": "Picture sourceset",
-          "description": "Use a srcSet to display picture",
+        "srcInverted": {
+          "title": "Source Inverted",
+          "description": "Logo inverted file source",
           "type": "string",
-          "format": "image"
+          "format": "image",
+          "examples": [
+            "logo-inverted.svg"
+          ]
         },
         "alt": {
           "title": "Alt text",
@@ -48,78 +55,6 @@
           "examples": [
             300
           ]
-        },
-        "className": {
-          "title": "Additional Classes",
-          "description": "Add additional css classes that should be applied to the button",
-          "type": "string"
-        },
-        "component": {
-          "title": "`ks-component` attribute",
-          "description": "Optional custom component identifier",
-          "type": "string"
-        },
-        "id": {
-          "title": "Id",
-          "description": "Add id attribute to the image",
-          "type": "string"
-        },
-        "itemProp": {
-          "title": "`itemprop` attribute",
-          "description": "Define an itemprop attribute for the picture",
-          "type": "string"
-        },
-        "style": {
-          "title": "`style` attribute",
-          "description": "Define a style attribute for the picture",
-          "type": "string"
-        },
-        "noscript": {
-          "title": "Noscript",
-          "description": "Render noscript fallback",
-          "type": "boolean",
-          "default": true
-        },
-        "lazy": {
-          "title": "Lazy",
-          "description": "Load the picture lazily",
-          "type": "boolean",
-          "default": true
-        },
-        "sources": {
-          "title": "Sources",
-          "description": "Additional sources. This will result in a `picture`-Element",
-          "type": "array",
-          "items": {
-            "type": "object",
-            "properties": {
-              "srcSet": {
-                "title": "Picture sourceset",
-                "description": "Use a srcSet to display picture",
-                "type": "string",
-                "format": "image"
-              },
-              "media": {
-                "title": "TODO MEDIA TITLE",
-                "description": "TODO MEDIA DESCRIPTION",
-                "type": "string"
-              },
-              "type": {
-                "title": "TODO TYPE TITLE",
-                "description": "TODO TYPE DESCRIPTION",
-                "type": "string"
-              }
-            },
-            "additionalProperties": false
-          }
-        },
-        "pictureClassName": {
-          "title": "`class` attribute",
-          "description": "Set additional class(es) to the picture",
-          "type": "string"
-        },
-        "type": {
-          "const": "picture"
         }
       },
       "additionalProperties": false
@@ -129,6 +64,12 @@
       "format": "uri",
       "default": "/"
     },
+    "flyoutLogoInverted": {
+      "type": "boolean",
+      "title": "Flyout Logo Inverted",
+      "description": "Toggle the inversion of the logo inside the mobile navigation",
+      "default": false
+    },
     "items": {
       "type": "array",
       "items": {

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

@@ -5,13 +5,63 @@
   "type": "object",
   "properties": {
     "logo": {
-      "$ref": "http://schema.kickstartds.com/base/picture.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",
+          "type": "string",
+          "format": "image",
+          "examples": ["logo.svg"]
+        },
+        "srcInverted": {
+          "title": "Source Inverted",
+          "description": "Logo inverted file source",
+          "type": "string",
+          "format": "image",
+          "examples": ["logo-inverted.svg"]
+        },
+        "alt": {
+          "title": "Alt text",
+          "description": "Alt text to display for picture",
+          "type": "string"
+        },
+        "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]
+        }
+      },
+      "additionalProperties": false
     },
     "logoHref": {
       "type": "string",
       "format": "uri",
       "default": "/"
     },
+    "flyoutLogoInverted": {
+      "type": "boolean",
+      "title": "Flyout Logo Inverted",
+      "description": "Toggle the inversion of the logo inside the mobile navigation",
+      "default": false
+    },
     "items": {
       "type": "array",
       "items": {

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

@@ -1,4 +1,4 @@
-.nav-toggle {
+.dsa-nav-toggle {
   --nav-toggle--color: var(--ks-text-color-default);
   --nav-toggle--color_open: var(--ks-text-color-default);
   --nav-toggle_floating--color: var(--ks-text-color-interface-interactive);
@@ -9,7 +9,7 @@ html.overlay-open {
   overflow: hidden;
 }
 
-button.nav-toggle {
+button.dsa-nav-toggle {
   display: block;
   position: relative;
   right: 0;
@@ -21,16 +21,16 @@ button.nav-toggle {
   --nav-toggle__icon-bar--offset: 14px;
 }
 @media (min-width: 42em) {
-  button.nav-toggle {
+  button.dsa-nav-toggle {
     --nav-toggle__icon-bar--offset: 18px;
   }
 }
 @media (min-width: 62em) {
-  button.nav-toggle {
+  button.dsa-nav-toggle {
     display: none;
   }
 }
-button.nav-toggle .nav-toggle__label {
+button.dsa-nav-toggle .dsa-nav-toggle__label {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(100%);
@@ -41,7 +41,7 @@ button.nav-toggle .nav-toggle__label {
   white-space: nowrap;
   width: 1px;
 }
-button.nav-toggle .nav-toggle__icon {
+button.dsa-nav-toggle .dsa-nav-toggle__icon {
   position: relative;
   display: block;
   cursor: pointer;
@@ -51,53 +51,53 @@ button.nav-toggle .nav-toggle__icon {
   transition: inherit;
   color: var(--nav-toggle--color);
 }
-.dsa-header--floating button.nav-toggle .nav-toggle__icon {
+.dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle_floating--color);
 }
 @media (min-width: 40rem) {
-  button.nav-toggle .nav-toggle__icon {
+  button.dsa-nav-toggle .dsa-nav-toggle__icon {
     transform: scale(0.8) translate(2.5%, 2.5%);
   }
 }
-.overlay-open button.nav-toggle .nav-toggle__icon, .overlay-open .header-is-scrolling button.nav-toggle .nav-toggle__icon {
+.overlay-open button.dsa-nav-toggle .dsa-nav-toggle__icon, .overlay-open .header-is-scrolling button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle--color_open);
 }
-.overlay-open .dsa-header--floating button.nav-toggle .nav-toggle__icon, .overlay-open .header-is-scrolling .dsa-header--floating button.nav-toggle .nav-toggle__icon {
+.overlay-open .dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon, .overlay-open .header-is-scrolling .dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle_floating--color_open);
 }
-.header-is-scrolling-up button.nav-toggle .nav-toggle__icon {
+.header-is-scrolling-up button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--nav-toggle--color_open);
 }
-button.nav-toggle .nav-toggle__icon::before, button.nav-toggle .nav-toggle__icon::after {
+button.dsa-nav-toggle .dsa-nav-toggle__icon::before, button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
   content: "";
 }
-button.nav-toggle .nav-toggle__icon .nav-toggle__icon__middle, button.nav-toggle .nav-toggle__icon::before, button.nav-toggle .nav-toggle__icon::after {
+button.dsa-nav-toggle .dsa-nav-toggle__icon .dsa-nav-toggle__icon__middle, button.dsa-nav-toggle .dsa-nav-toggle__icon::before, button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
   position: absolute;
   width: 100%;
   height: 3px;
   background-color: currentColor;
 }
-button.nav-toggle .nav-toggle__icon .nav-toggle__icon__middle {
+button.dsa-nav-toggle .dsa-nav-toggle__icon .dsa-nav-toggle__icon__middle {
   top: 50%;
   margin-top: -1.5px;
 }
-button.nav-toggle .nav-toggle__icon::before {
+button.dsa-nav-toggle .dsa-nav-toggle__icon::before {
   top: 2px;
   transition: top 150ms ease 150ms, transform ease 150ms;
 }
-button.nav-toggle .nav-toggle__icon::after {
+button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
   bottom: 2px;
   transition: bottom 150ms ease 150ms, transform ease 150ms;
 }
-button.nav-toggle[aria-expanded=true] .nav-toggle__icon__middle {
+button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon__middle {
   display: none;
 }
-button.nav-toggle[aria-expanded=true] .nav-toggle__icon::before {
+button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon::before {
   top: var(--nav-toggle__icon-bar--offset);
   transition: top ease 150ms, transform 150ms ease 150ms;
   transform: rotate(-45deg);
 }
-button.nav-toggle[aria-expanded=true] .nav-toggle__icon::after {
+button.dsa-nav-toggle[aria-expanded=true] .dsa-nav-toggle__icon::after {
   bottom: var(--nav-toggle__icon-bar--offset);
   transition: bottom ease 150ms, transform 150ms ease 150ms;
   transform: rotate(45deg);

package/dist/components/page-wrapper/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jul 2024 07:54:39 GMT
+ * Generated on Tue, 30 Jul 2024 08:06:46 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/components/presets.json

@@ -1380,6 +1380,7 @@
         "lazy": false
       },
       "logoHref": "/",
+      "flyoutLogoInverted": false,
       "floating": false,
       "inverted": false,
       "navItems": [

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

@@ -20,6 +20,13 @@
           "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",
@@ -69,6 +76,12 @@
           "format": "uri",
           "default": "/"
         },
+        "flyoutLogoInverted": {
+          "type": "boolean",
+          "title": "Flyout Logo Inverted",
+          "description": "Toggle the inversion of the logo inside the mobile navigation",
+          "default": false
+        },
         "floating": {
           "type": "boolean",
           "title": "Floating",

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jul 2024 07:54:42 GMT
+ * Generated on Tue, 30 Jul 2024 08:06:49 GMT
  */
 :root [ks-theme=business] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jul 2024 07:54:46 GMT
+ * Generated on Tue, 30 Jul 2024 08:06:53 GMT
  */
 :root [ks-theme=google] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jul 2024 07:54:44 GMT
+ * Generated on Tue, 30 Jul 2024 08:06:51 GMT
  */
 :root [ks-theme=ngo] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jul 2024 07:54:48 GMT
+ * Generated on Tue, 30 Jul 2024 08:06:55 GMT
  */
 :root [ks-theme=telekom] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/tokens/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jul 2024 07:54:39 GMT
+ * Generated on Tue, 30 Jul 2024 08:06:46 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jul 2024 07:54:40 GMT
+ * Generated on Tue, 30 Jul 2024 08:06:47 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#230a2b";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.3.23",
+  "version": "1.3.24",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {