@kickstartds/ds-agency-premium 1.4.0--canary.14.713.0 → 1.4.0--canary.14.724.0

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/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.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.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

@@ -3,9 +3,9 @@
   --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);
+  --dsa-nav-toggle_floating--shadow: 2px 4px 6px var(--ks-color-fg-inverted);
+  --dsa-nav-toggle_floating--color: var(--ks-color-fg);
+  --dsa-nav-toggle_floating--color_open: var(--ks-color-fg);
 }
 
 html.overlay-open {
@@ -48,9 +48,11 @@ button.dsa-nav-toggle .dsa-nav-toggle__icon {
   transform: scale(0.7) translate(7.5%, 7.5%);
   transition: inherit;
   color: var(--dsa-nav-toggle--color);
+  filter: drop-shadow(var(--dsa-nav-toggle--shadow));
 }
 .dsa-header--floating button.dsa-nav-toggle .dsa-nav-toggle__icon {
   color: var(--dsa-nav-toggle_floating--color);
+  filter: drop-shadow(var(--dsa-nav-toggle_floating--shadow));
 }
 @media (min-width: 40em) {
   button.dsa-nav-toggle .dsa-nav-toggle__icon {
@@ -60,12 +62,6 @@ 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);
 }
-.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);
-}
-.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: "";
 }

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.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 11:34:05 GMT
+ * Generated on Fri, 23 Aug 2024 12:49:12 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -37,7 +37,7 @@
   --ks-background-color-card-interactive-hover-base: var(--ks-color-fg-alpha-9-base);
   --ks-background-color-card-interactive-active-base: var(--ks-color-fg-alpha-9-base);
   --ks-background-color-card-interactive-selected-base: var(--ks-color-primary-base);
-  --ks-background-color-card-inverted-base: var(--ks-color-fg-inverted-alpha-9-base);
+  --ks-background-color-card-inverted-base: var(--ks-color-fg-inverted-to-bg-9-base);
   --ks-background-color-card-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-9-base);
   --ks-background-color-card-inverted-interactive-disabled-base: var(--ks-color-fg-inverted-alpha-7-base);
   --ks-background-color-card-inverted-interactive-hover-base: var(--ks-color-fg-inverted-alpha-9-base);

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 23 Aug 2024 11:34:08 GMT
+ * Generated on Fri, 23 Aug 2024 12:49:14 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 11:34:12 GMT
+ * Generated on Fri, 23 Aug 2024 12:49:18 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 11:34:10 GMT
+ * Generated on Fri, 23 Aug 2024 12:49:16 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 11:34:14 GMT
+ * Generated on Fri, 23 Aug 2024 12:49:20 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 11:34:05 GMT
+ * Generated on Fri, 23 Aug 2024 12:49:12 GMT
  */
 
 :root, [ks-theme] {
@@ -38,7 +38,7 @@
   --ks-background-color-card-interactive-hover-base: var(--ks-color-fg-alpha-9-base);
   --ks-background-color-card-interactive-active-base: var(--ks-color-fg-alpha-9-base);
   --ks-background-color-card-interactive-selected-base: var(--ks-color-primary-base);
-  --ks-background-color-card-inverted-base: var(--ks-color-fg-inverted-alpha-9-base);
+  --ks-background-color-card-inverted-base: var(--ks-color-fg-inverted-to-bg-9-base);
   --ks-background-color-card-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-9-base);
   --ks-background-color-card-inverted-interactive-disabled-base: var(--ks-color-fg-inverted-alpha-7-base);
   --ks-background-color-card-inverted-interactive-hover-base: var(--ks-color-fg-inverted-alpha-9-base);

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 23 Aug 2024 11:34:06 GMT
+ * Generated on Fri, 23 Aug 2024 12:49:12 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#230a2b";
@@ -37,7 +37,7 @@ export const KsBackgroundColorCardInteractiveDisabledBase = "rgba(255, 255, 255,
 export const KsBackgroundColorCardInteractiveHoverBase = "rgba(255, 255, 255, 0.05)";
 export const KsBackgroundColorCardInteractiveActiveBase = "rgba(255, 255, 255, 0.05)";
 export const KsBackgroundColorCardInteractiveSelectedBase = "#e21879";
-export const KsBackgroundColorCardInvertedBase = "rgba(6, 8, 31, 0.05)";
+export const KsBackgroundColorCardInvertedBase = "#e5e5e8";
 export const KsBackgroundColorCardInvertedInteractiveBase = "rgba(6, 8, 31, 0.05)";
 export const KsBackgroundColorCardInvertedInteractiveDisabledBase = "rgba(6, 8, 31, 0.24)";
 export const KsBackgroundColorCardInvertedInteractiveHoverBase = "rgba(6, 8, 31, 0.05)";

package/package.json

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