@kickstartds/ds-agency-premium 1.4.0--canary.14.705.0 → 1.4.0--canary.14.719.0

package/dist/SectionProps-83d399b4.d.ts

@@ -8,7 +8,7 @@ import { FaqProps } from "./FaqProps-ad618cd5.js";
 import { FeaturesProps } from "./FeaturesProps-b05859d6.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-cf82a16d.js";
-import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogOverviewProps } from "../../BlogOverviewProps-f385fc47.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-93230a76.js";
 declare const BlogOverview: {
     ({ latest, more }: BlogOverviewProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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

@@ -1,4 +1,4 @@
-import { BlogPostProps } from "../../BlogPostProps-440f88a5.js";
+import { BlogPostProps } from "../../BlogPostProps-83d399b4.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
 export { BlogPost };

package/dist/components/header/header.css

@@ -14,6 +14,7 @@
 }
 
 .dsa-header {
+  --dsa-header--max-width: var(--l-section--content-width-max);
   --dsa-header--background: var(--ks-background-color-default);
   --dsa-header_floating--background: linear-gradient(var(--ks-color-bg), transparent);
   --dsa-header__logo--height: var(--dsa-logo--height);
@@ -37,7 +38,7 @@
 }
 .dsa-header__content {
   padding: 0 var(--dsa-header--spacing-horizontal);
-  max-width: var(--l-section--content-width-max);
+  max-width: var(--dsa-header--max-width);
   width: 100%;
   margin: auto;
   display: flex;

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

@@ -1,4 +1,7 @@
-import { FC } from "react";
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
 import { HeaderProps } from "../../HeaderProps-e22382f1.js";
-declare const Header: FC<HeaderProps>;
-export { Header };
+declare const HeaderContextDefault: import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const HeaderContext: import("react").Context<import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { HeaderContextDefault, HeaderContext, Header };

package/dist/components/header/index.js

@@ -1,13 +1,14 @@
 import "./header.css";
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import classnames from 'classnames';
+import { forwardRef, createContext, useContext } from 'react';
 import { NavMain } from '../nav-main/index.js';
 import { Logo } from '../logo/index.js';
-import '../nav/js/NavToggle.client.js';
+import '../nav-main/js/NavToggle.client.js';
 import '@kickstartds/core/lib/component';
-import '../nav/js/navMainEvents.client.js';
+import '../nav-main/js/navMainEvents.client.js';
 import '@kickstartds/core/lib/core';
-import '../nav/js/body.client.js';
+import '../nav-main/js/body.client.js';
 import '../nav-toggle/index.js';
 import '../nav-topbar/index.js';
 import '@kickstartds/base/lib/link';
@@ -16,10 +17,15 @@ import '../nav-dropdown/index.js';
 import '../nav-flyout/index.js';
 import '@kickstartds/base/lib/picture';
 
-const Header = ({ logo, floating, inverted = false, flyoutInverted = false, dropdownInverted = 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: [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) => (jsx("div", { 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 HeaderContext = createContext(HeaderContextDefault);
+const Header = forwardRef((props, ref) => {
+    const Component = useContext(HeaderContext);
+    return jsx(Component, { ...props, ref: ref });
+});
 Header.displayName = "Header";
 
-export { Header };
+export { Header, HeaderContext, HeaderContextDefault };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "../../ImageStoryProps-03ff6d21.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

@@ -72,6 +72,6 @@ interface SettingsProps {
      */
     seo: SeoProps;
 }
-export * from "../../BlogPostProps-440f88a5.js";
-export * from "../../BlogOverviewProps-f385fc47.js";
+export * from "../../BlogPostProps-83d399b4.js";
+export * from "../../BlogOverviewProps-93230a76.js";
 export { Sections, ToggleFloating, ToggleInverted, ToggleInverted1, PageProps, Header, Footer, SettingsProps };

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

@@ -1,4 +1,7 @@
-import { FC } from "react";
+/// <reference types="react" />
+import { ImgHTMLAttributes } from "react";
 import { LogoProps } from "../../LogoProps-01796f0a.js";
-declare const Logo: FC<LogoProps>;
-export { Logo };
+declare const LogoContextDefault: import("react").ForwardRefExoticComponent<LogoProps & ImgHTMLAttributes<HTMLImageElement> & import("react").RefAttributes<HTMLImageElement>>;
+declare const LogoContext: import("react").Context<import("react").ForwardRefExoticComponent<LogoProps & ImgHTMLAttributes<HTMLImageElement> & import("react").RefAttributes<HTMLImageElement>>>;
+declare const Logo: import("react").ForwardRefExoticComponent<LogoProps & ImgHTMLAttributes<HTMLImageElement> & import("react").RefAttributes<HTMLImageElement>>;
+export { LogoContextDefault, LogoContext, Logo };

package/dist/components/logo/index.js

@@ -1,12 +1,18 @@
 import "./logo.css";
 import { jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
+import { forwardRef, createContext, useContext } from 'react';
 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, }) => {
-    return (jsx(Link, { className: classnames("dsa-logo", className), href: homepageHref, children: jsx(Picture, { className: "dsa-logo__img", src: inverted && srcInverted ? srcInverted : src, alt: alt, width: width, height: height }) }));
-};
+const LogoContextDefault = forwardRef(({ src, srcInverted, alt, inverted = false, width, height, homepageHref, className, }, ref) => {
+    return (jsx(Link, { className: classnames("dsa-logo", className), href: homepageHref, children: jsx(Picture, { ref: ref, className: "dsa-logo__img", src: inverted && srcInverted ? srcInverted : src, alt: alt, width: width, height: height }) }));
+});
+const LogoContext = createContext(LogoContextDefault);
+const Logo = forwardRef((props, ref) => {
+    const Component = useContext(LogoContext);
+    return jsx(Component, { ...props, ref: ref });
+});
 Logo.displayName = "Logo";
 
-export { Logo };
+export { Logo, LogoContext, LogoContextDefault };

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

@@ -10,7 +10,7 @@
   --dsa-nav-dropdown__label--color_active: var(--ks-text-color-interface-interactive-active);
   --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-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_dimmed--opacity: 0.6;
 }
@@ -33,6 +33,10 @@
 .dsa-nav-dropdown:hover .dsa-nav-dropdown__label:not(:hover) {
   opacity: var(--dsa-nav-dropdown__label_dimmed--opacity);
 }
+.dsa-nav-dropdown .dsa-nav-dropdown__item--active .dsa-nav-dropdown__label {
+  color: var(--dsa-nav-dropdown__label--color_active);
+  font-weight: var(--dsa-nav-dropdown__label--font-weight_active);
+}
 .dsa-nav-dropdown .dsa-nav-dropdown__label {
   text-decoration: var(--dsa-nav-dropdown__label--text-decoration);
   font: inherit;
@@ -46,7 +50,4 @@
 .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);
   text-decoration: var(--dsa-nav-dropdown__label--text-decoration_hover);
-}
-.dsa-nav-dropdown .dsa-nav-dropdown__label--active {
-  color: var(--dsa-nav-dropdown__label--color_active);
 }

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

@@ -0,0 +1,40 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/nav-dropdown.schema.json",
+  "title": "Nav Dropdown",
+  "type": "object",
+  "properties": {
+    "inverted": {
+      "type": "boolean",
+      "title": "Dropdown Inverted",
+      "description": "Toggle the inversion of the dropdown navigation",
+      "default": false
+    },
+    "items": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "href": {
+            "type": "string",
+            "format": "uri"
+          },
+          "label": {
+            "type": "string"
+          },
+          "active": {
+            "type": "boolean"
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    "className": {
+      "type": "string"
+    },
+    "type": {
+      "const": "nav-dropdown"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,18 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/nav-dropdown.schema.json",
+  "title": "Nav Dropdown",
+  "type": "object",
+  "properties": {
+    "inverted": {
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/dropdownInverted"
+    },
+    "items": {
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/items/items/properties/items"
+    },
+    "className": {
+      "type": "string"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -1,7 +1,34 @@
 /// <reference types="react" />
-declare const NavFlyout: ({ items, inverted, logo }: {
-    items: any;
-    inverted: any;
-    logo: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export { NavFlyout };
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * 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";
+import { HTMLAttributes } from "react";
+/**
+ * Toggle the inversion of the flyout navigation
+ */
+type FlyoutInverted = boolean;
+interface NavFlyoutProps {
+    items?: {
+        href: string;
+        label: string;
+        active?: boolean;
+        items?: {
+            href?: string;
+            label?: string;
+            active?: boolean;
+        }[];
+    }[];
+    inverted?: FlyoutInverted;
+    /**
+     * Referenced component LogoProps
+     */
+    logo: LogoProps;
+}
+declare const NavFlyoutContextDefault: import("react").ForwardRefExoticComponent<NavFlyoutProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const NavFlyoutContext: import("react").Context<import("react").ForwardRefExoticComponent<NavFlyoutProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const NavFlyout: import("react").ForwardRefExoticComponent<NavFlyoutProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { NavFlyoutContextDefault, NavFlyoutContext, NavFlyout };

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

@@ -4,12 +4,19 @@ import classnames from 'classnames';
 import { Link } from '@kickstartds/base/lib/link';
 import { Icon } from '@kickstartds/base/lib/icon';
 import { Logo } from '../logo/index.js';
+import { forwardRef, createContext, useContext } from 'react';
 import '@kickstartds/base/lib/picture';
 
-const NavFlyout = ({ items, inverted, logo }) => items && items.length > 0 ? (jsxs("nav", { className: "dsa-nav-flyout", "ks-inverted": inverted.toString(), id: "dsa-nav-flyout", "aria-label": "Hauptnavigation", children: [jsx(Logo, { ...logo, className: "dsa-nav-flyout__logo" }), jsx("ul", { className: "dsa-nav-flyout__list", children: items.map(({ label, href, active, items: subItems }) => {
+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 ? (jsxs("span", { tabIndex: 0, className: "dsa-nav-flyout__label", children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-flyout__label__icon", icon: "chevron-down" })) : ("")] })) : (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;
+            }) })] })) : null);
+const NavFlyoutContext = createContext(NavFlyoutContextDefault);
+const NavFlyout = forwardRef((props, ref) => {
+    const Component = useContext(NavFlyoutContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+NavFlyout.displayName = "NavFlyout";
 
-export { NavFlyout };
+export { NavFlyout, NavFlyoutContext, NavFlyoutContextDefault };

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: 30rem;
-  --dsa-nav-flyout--shadow: 20px 0px 30px var(--ks-color-fg-inverted-base);
+  --dsa-nav-flyout--max-width: 18em;
+  --dsa-nav-flyout--shadow: 20px 0px 30px var(--ks-color-fg-inverted-alpha-5-base);
   --dsa-nav-flyout--gap: var(--ks-spacing-stack-m);
   --dsa-nav-flyout--background: linear-gradient(
     125deg,
@@ -17,7 +17,7 @@
   --dsa-nav-flyout__label--padding: 0.25em 0;
   --dsa-nav-flyout__label--text-decoration: none;
   --dsa-nav-flyout__label--text-decoration_hover: none;
-  --dsa-nav-flyout__label_dimmed--opacity: 0.6;
+  --dsa-nav-flyout__label_dimmed--opacity: 0.8;
   --dsa-nav-flyout__label__icon--size: 1.5em;
   --dsa-nav-flyout__sublist--padding: 0.25em 0 0.5em 0.75em;
   --dsa-nav-flyout__sublist__label--color: var(--ks-color-fg);
@@ -28,6 +28,7 @@
 
 .dsa-nav-flyout {
   display: none;
+  font: var(--dsa-nav-flyout__label--font);
   flex-direction: column;
   gap: var(--dsa-nav-flyout--gap);
   left: -100%;

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

@@ -0,0 +1,169 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/nav-flyout.schema.json",
+  "title": "Nav Flyout",
+  "type": "object",
+  "properties": {
+    "items": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "href": {
+            "type": "string",
+            "format": "uri"
+          },
+          "label": {
+            "type": "string"
+          },
+          "active": {
+            "type": "boolean"
+          },
+          "items": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "href": {
+                  "type": "string",
+                  "format": "uri"
+                },
+                "label": {
+                  "type": "string"
+                },
+                "active": {
+                  "type": "boolean"
+                }
+              },
+              "additionalProperties": false
+            }
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "href",
+          "label"
+        ]
+      },
+      "examples": [
+        [
+          {
+            "label": "Active Item",
+            "href": "#",
+            "active": true
+          },
+          {
+            "label": "Navigation Item",
+            "href": "#"
+          },
+          {
+            "label": "Dropdown",
+            "href": "#",
+            "items": [
+              {
+                "label": "Level 2 Item",
+                "href": "#"
+              },
+              {
+                "label": "Active Item",
+                "active": true,
+                "href": "#"
+              },
+              {
+                "label": "An Item with a longer Label",
+                "href": "#"
+              },
+              {
+                "label": "And One last one",
+                "href": "#"
+              }
+            ]
+          },
+          {
+            "label": "One more Item",
+            "href": "#"
+          },
+          {
+            "label": "Last Item",
+            "href": "#"
+          }
+        ]
+      ]
+    },
+    "inverted": {
+      "type": "boolean",
+      "title": "Flyout Inverted",
+      "description": "Toggle the inversion of the flyout navigation",
+      "default": false
+    },
+    "logo": {
+      "$schema": "http://json-schema.org/draft-07/schema#",
+      "$id": "http://schema.mydesignsystem.com/logo.schema.json",
+      "title": "Logo",
+      "type": "object",
+      "properties": {
+        "src": {
+          "title": "Source",
+          "description": "Picture source",
+          "type": "string",
+          "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",
+          "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"
+        },
+        "type": {
+          "const": "logo"
+        }
+      },
+      "additionalProperties": false
+    },
+    "type": {
+      "const": "nav-flyout"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "logo"
+  ]
+}

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

@@ -0,0 +1,19 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/nav-flyout.schema.json",
+  "title": "Nav Flyout",
+  "type": "object",
+  "properties": {
+    "items": {
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/items"
+    },
+    "inverted": {
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/flyoutInverted"
+    },
+    "logo": {
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/logo"
+    }
+  },
+  "additionalProperties": false,
+  "required": ["logo"]
+}

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

@@ -1,4 +1,5 @@
-import { FC } from "react";
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
 /* eslint-disable */
 /**
  * This file was automatically generated by json-schema-to-typescript.
@@ -53,5 +54,7 @@ interface CTA {
     label?: Label;
     target?: Target;
 }
-declare const NavMain: FC<NavMainProps>;
-export { NavMain };
+declare const NavMainContextDefault: import("react").ForwardRefExoticComponent<NavMainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const NavMainContext: import("react").Context<import("react").ForwardRefExoticComponent<NavMainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const NavMain: import("react").ForwardRefExoticComponent<NavMainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { NavMainContextDefault, NavMainContext, NavMain };

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

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '../nav/js/NavToggle.client.js';
-import '../nav/js/navMainEvents.client.js';
-import { NavToggleComponent } from '../nav-toggle/index.js';
+import { forwardRef, createContext, useContext } from 'react';
+import './js/NavToggle.client.js';
+import './js/navMainEvents.client.js';
+import { NavToggle } from '../nav-toggle/index.js';
 import { NavTopbar } from '../nav-topbar/index.js';
 import { NavFlyout } from '../nav-flyout/index.js';
 import '@kickstartds/core/lib/component';
-import '../nav/js/body.client.js';
+import './js/body.client.js';
 import '@kickstartds/core/lib/core';
 import 'classnames';
 import '@kickstartds/base/lib/link';
@@ -14,6 +15,12 @@ import '../nav-dropdown/index.js';
 import '../logo/index.js';
 import '@kickstartds/base/lib/picture';
 
-const NavMain = ({ logo, items, flyoutInverted, dropdownInverted, }) => items && items.length > 0 ? (jsxs("div", { className: "dsa-nav-main", children: [jsx(NavToggleComponent, {}), jsx(NavTopbar, { items: items, dropdownInverted: dropdownInverted }), jsx(NavFlyout, { items: items, inverted: flyoutInverted, logo: logo })] })) : null;
+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);
+const NavMain = forwardRef((props, ref) => {
+    const Component = useContext(NavMainContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+NavMain.displayName = "NavMain";
 
-export { NavMain };
+export { NavMain, NavMainContext, NavMainContextDefault };

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

@@ -1,3 +1,6 @@
-import { FC } from "react";
-declare const NavToggleComponent: FC;
-export { NavToggleComponent };
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
+declare const NavToggleContextDefault: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+declare const NavToggleContext: import("react").Context<import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>>;
+declare const NavToggle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+export { NavToggleContextDefault, NavToggleContext, NavToggle };

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

@@ -1,6 +1,13 @@
 import "./nav-toggle.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
 
-const NavToggleComponent = () => (jsxs("button", { type: "button", className: "dsa-nav-toggle", id: "toggle-sidebar", "aria-controls": "dsa-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 NavToggleContextDefault = forwardRef((_, ref) => (jsxs("button", { ref: ref, type: "button", className: "dsa-nav-toggle", id: "toggle-sidebar", "aria-controls": "dsa-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 NavToggleContext = createContext(NavToggleContextDefault);
+const NavToggle = forwardRef((props, ref) => {
+    const Component = useContext(NavToggleContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+NavToggle.displayName = "NavToggle";
 
-export { NavToggleComponent };
+export { NavToggle, NavToggleContext, NavToggleContextDefault };

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

@@ -2,6 +2,8 @@
   --dsa-nav-toggle--size: var(--dsa-logo--height);
   --dsa-nav-toggle--color: var(--ks-text-color-default);
   --dsa-nav-toggle--color_open: var(--ks-text-color-default);
+  --dsa-nav-toggle--shadow: none;
+  --dsa-nav-toggle_floating--shadow: 0 0 20px 2px var(--ks-color-fg-inverted-alpha-5);
   --dsa-nav-toggle_floating--color: var(--ks-text-color-interface-interactive);
   --dsa-nav-toggle_floating--color_open: var(--ks-text-color-interface-interactive);
 }
@@ -55,19 +57,20 @@ button.dsa-nav-toggle .dsa-nav-toggle__icon {
     transform: scale(0.8) translate(2.5%, 2.5%);
   }
 }
-.overlay-open button.dsa-nav-toggle .dsa-nav-toggle__icon, .overlay-open .header-is-scrolling button.dsa-nav-toggle .dsa-nav-toggle__icon {
+.overlay-open button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--dsa-nav-toggle--color_open);
 }
-.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(--dsa-nav-toggle_floating--color_open);
+.dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon .dsa-nav-toggle__icon__middle, .dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon::before, .dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
+  box-shadow: var(--dsa-nav-toggle_floating--shadow);
 }
-.header-is-scrolling-up button.dsa-nav-toggle .dsa-nav-toggle__icon {
-  color: var(--dsa-nav-toggle--color_open);
+.overlay-open .dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon {
+  color: var(--dsa-nav-toggle_floating--color_open);
 }
 button.dsa-nav-toggle .dsa-nav-toggle__icon::before, button.dsa-nav-toggle .dsa-nav-toggle__icon::after {
   content: "";
 }
 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 {
+  box-shadow: var(--dsa-nav-toggle--shadow);
   position: absolute;
   width: 100%;
   height: 3px;

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

@@ -1,6 +1,29 @@
 /// <reference types="react" />
-declare const NavTopbar: ({ items, dropdownInverted }: {
-    items: any;
-    dropdownInverted: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export { NavTopbar };
+import { HTMLAttributes } from "react";
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * Toggle the inversion of the dropdown navigation
+ */
+type DropdownInverted = boolean;
+interface NavTopbarProps {
+    items?: {
+        href: string;
+        label: string;
+        active?: boolean;
+        items?: {
+            href?: string;
+            label?: string;
+            active?: boolean;
+        }[];
+    }[];
+    inverted?: DropdownInverted;
+}
+declare const NavTopbarContextDefault: import("react").ForwardRefExoticComponent<NavTopbarProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const NavTopbarContext: import("react").Context<import("react").ForwardRefExoticComponent<NavTopbarProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const NavTopbar: import("react").ForwardRefExoticComponent<NavTopbarProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { NavTopbarContextDefault, NavTopbarContext, NavTopbar };

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

@@ -4,9 +4,16 @@ import classnames from 'classnames';
 import { Link } from '@kickstartds/base/lib/link';
 import { Icon } from '@kickstartds/base/lib/icon';
 import { NavDropdown } from '../nav-dropdown/index.js';
+import { forwardRef, createContext, useContext } from 'react';
 
-const NavTopbar = ({ items, dropdownInverted }) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-topbar", id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: jsx("ul", { className: "dsa-nav-topbar__list", children: items.map(({ label, href, active, items: subItems }) => {
-            return (jsxs("li", { className: classnames("dsa-nav-topbar__item", active && "dsa-nav-topbar__item--active", subItems?.length && "dsa-nav-topbar__item--dropdown"), children: [subItems?.length ? (jsxs("span", { tabIndex: 0, className: "dsa-nav-topbar__label", children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-topbar__label__icon", icon: "chevron-down" })) : ("")] })) : (jsx(Link, { href: href, className: `dsa-nav-topbar__label dsa-nav-topbar__link`, children: label })), subItems?.length ? (jsx(NavDropdown, { items: subItems, inverted: dropdownInverted })) : null] }, href));
-        }) }) })) : null;
+const NavTopbarContextDefault = forwardRef(({ items, inverted }, ref) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-topbar", id: "dsa-nav-main", "aria-label": "Hauptnavigation", ref: ref, children: jsx("ul", { className: "dsa-nav-topbar__list", children: items.map(({ label, href, active, items: subItems }) => {
+            return (jsxs("li", { className: classnames("dsa-nav-topbar__item", active && "dsa-nav-topbar__item--active", subItems?.length && "dsa-nav-topbar__item--dropdown"), children: [subItems?.length ? (jsxs("span", { tabIndex: 0, className: "dsa-nav-topbar__label", children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-topbar__label__icon", icon: "chevron-down" })) : ("")] })) : (jsx(Link, { href: href, className: `dsa-nav-topbar__label dsa-nav-topbar__link`, children: label })), subItems?.length ? (jsx(NavDropdown, { items: subItems, inverted: inverted })) : null] }, href));
+        }) }) })) : null);
+const NavTopbarContext = createContext(NavTopbarContextDefault);
+const NavTopbar = forwardRef((props, ref) => {
+    const Component = useContext(NavTopbarContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+NavTopbar.displayName = "NavTopbar";
 
-export { NavTopbar };
+export { NavTopbar, NavTopbarContext, NavTopbarContextDefault };

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

@@ -20,12 +20,10 @@
   --g-link--text-decoration: none;
   --g-link--text-decoration_hover: none;
   display: none;
-  flex-direction: column;
-  justify-content: flex-start;
 }
 @media (min-width: 62rem) {
   .dsa-nav-topbar {
-    display: flex;
+    display: block;
   }
 }
 .dsa-nav-topbar ul {

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

@@ -0,0 +1,107 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/nav-topbar.schema.json",
+  "title": "Nav Topbar",
+  "type": "object",
+  "properties": {
+    "items": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "href": {
+            "type": "string",
+            "format": "uri"
+          },
+          "label": {
+            "type": "string"
+          },
+          "active": {
+            "type": "boolean"
+          },
+          "items": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "href": {
+                  "type": "string",
+                  "format": "uri"
+                },
+                "label": {
+                  "type": "string"
+                },
+                "active": {
+                  "type": "boolean"
+                }
+              },
+              "additionalProperties": false
+            }
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "href",
+          "label"
+        ]
+      },
+      "examples": [
+        [
+          {
+            "label": "Active Item",
+            "href": "#",
+            "active": true
+          },
+          {
+            "label": "Navigation Item",
+            "href": "#"
+          },
+          {
+            "label": "Dropdown",
+            "href": "#",
+            "items": [
+              {
+                "label": "Level 2 Item",
+                "href": "#"
+              },
+              {
+                "label": "Active Item",
+                "active": true,
+                "href": "#"
+              },
+              {
+                "label": "An Item with a longer Label",
+                "href": "#"
+              },
+              {
+                "label": "And One last one",
+                "href": "#"
+              }
+            ]
+          },
+          {
+            "label": "One more Item",
+            "href": "#"
+          },
+          {
+            "label": "Last Item",
+            "href": "#"
+          }
+        ]
+      ]
+    },
+    "inverted": {
+      "type": "boolean",
+      "title": "Dropdown Inverted",
+      "description": "Toggle the inversion of the dropdown navigation",
+      "default": false
+    },
+    "type": {
+      "const": "nav-topbar"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "logo"
+  ]
+}

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

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/nav-topbar.schema.json",
+  "title": "Nav Topbar",
+  "type": "object",
+  "properties": {
+    "items": {
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/items"
+    },
+    "inverted": {
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/dropdownInverted"
+    }
+  },
+  "additionalProperties": false,
+  "required": ["logo"]
+}

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 23 Aug 2024 06:52:02 GMT
+ * Generated on Fri, 23 Aug 2024 12:31:56 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 23 Aug 2024 06:52:05 GMT
+ * Generated on Fri, 23 Aug 2024 12:31:58 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 Fri, 23 Aug 2024 06:52:10 GMT
+ * Generated on Fri, 23 Aug 2024 12:32:03 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 Fri, 23 Aug 2024 06:52:08 GMT
+ * Generated on Fri, 23 Aug 2024 12:32:01 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 Fri, 23 Aug 2024 06:52:12 GMT
+ * Generated on Fri, 23 Aug 2024 12:32:06 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 Fri, 23 Aug 2024 06:52:02 GMT
+ * Generated on Fri, 23 Aug 2024 12:31:56 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 23 Aug 2024 06:52:03 GMT
+ * Generated on Fri, 23 Aug 2024 12:31:56 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#230a2b";

package/package.json

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