@kickstartds/ds-agency-premium 1.6.71--canary.55.2416.0 → 1.6.71

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

@@ -1,5 +1,5 @@
 .dsa-nav-dropdown {
-  --dsa-nav-dropdown--padding: var(--ks-spacing-xxs) var(--ks-spacing-xxs) var(--ks-spacing-m) var(--ks-spacing-xxs);
+  --dsa-nav-dropdown--padding: var(--ks-spacing-inset-stretch-xs);
   --dsa-nav-dropdown--background: var(--ks-background-color-default);
   --dsa-nav-dropdown--border-radius: var(--ks-border-radius-card);
   --dsa-nav-dropdown--box-shadow: var(--ks-box-shadow-card);
@@ -8,15 +8,11 @@
   --dsa-nav-dropdown__label--color: var(--ks-color-fg);
   --dsa-nav-dropdown__label--color_hover: var(--ks-text-color-interface-interactive-hover);
   --dsa-nav-dropdown__label--color_active: var(--ks-text-color-interface-interactive-active);
-  --dsa-nav-dropdown__label--background-color_hover: var(--ks-color-fg-alpha-8);
-  --dsa-nav-dropdown__label--background-color_active: unset;
-  --dsa-nav-dropdown__label--border-radius: var(--ks-border-radius-control);
-  --dsa-nav-dropdown__label--font: var(--ks-font-interface-s);
-  --dsa-nav-dropdown__label--font-family: var(--ks-font-family-display);
+  --dsa-nav-dropdown__label--font: var(--ks-font-interface-m);
   --dsa-nav-dropdown__label--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-nav-dropdown__label--font-weight_active: var(--ks-font-weight-bold);
-  --dsa-nav-dropdown__label--padding: 0.45em 0.75em;
-  --dsa-nav-dropdown__label_dimmed--opacity: 1;
+  --dsa-nav-dropdown__label--padding: 0.35em 0.25em;
+  --dsa-nav-dropdown__label_dimmed--opacity: 0.75;
 }
 .dsa-nav-dropdown[ks-inverted=true] {
   --dsa-nav-dropdown--background: var(--ks-color-fg-inverted);
@@ -25,7 +21,6 @@
 .dsa-nav-dropdown {
   --g-link--text-decoration: none;
   --g-link--text-decoration_hover: none;
-  z-index: 99;
   font: var(--dsa-nav-dropdown__label--font);
   min-width: var(--dsa-nav-dropdown--min-width);
   padding: var(--dsa-nav-dropdown--padding);
@@ -43,23 +38,19 @@
 }
 .dsa-nav-dropdown .dsa-nav-dropdown__item--active .dsa-nav-dropdown__label {
   color: var(--dsa-nav-dropdown__label--color_active);
-  background-color: var(--dsa-nav-dropdown__label--background-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;
   font-weight: var(--dsa-nav-dropdown__label--font-weight);
-  font-family: var(--dsa-nav-dropdown__label--font-family);
   color: var(--dsa-nav-dropdown__label--color);
   position: relative;
   display: block;
   padding: var(--dsa-nav-dropdown__label--padding);
   text-align: left;
-  border-radius: var(--dsa-nav-dropdown__label--border-radius);
 }
 .dsa-nav-dropdown .dsa-nav-dropdown__label:hover, .dsa-nav-dropdown .dsa-nav-dropdown__label:focus, .dsa-nav-dropdown .dsa-nav-dropdown__label:active {
   color: var(--dsa-nav-dropdown__label--color_hover);
-  background-color: var(--dsa-nav-dropdown__label--background-color_hover);
   text-decoration: var(--dsa-nav-dropdown__label--text-decoration_hover);
 }

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

@@ -15,7 +15,7 @@
       "items": {
         "type": "object",
         "properties": {
-          "url": {
+          "href": {
             "type": "string",
             "format": "uri"
           },
@@ -31,6 +31,9 @@
     },
     "className": {
       "type": "string"
+    },
+    "type": {
+      "const": "nav-dropdown"
     }
   },
   "additionalProperties": false

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

@@ -13,11 +13,11 @@ import { HTMLAttributes } from "react";
 type FlyoutInverted = boolean;
 interface NavFlyoutProps {
     items?: {
-        url: string;
+        href: string;
         label: string;
         active?: boolean;
         items?: {
-            url?: string;
+            href?: string;
             label?: string;
             active?: boolean;
         }[];

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

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

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: 100%;
-  --dsa-nav-flyout--shadow: 0px 0px 0px 100px var(--ks-color-fg-alpha-2-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,
@@ -11,22 +11,16 @@
   --dsa-nav-flyout__label--color: var(--ks-color-fg);
   --dsa-nav-flyout__label--color_hover: var(--ks-text-color-interface-interactive-hover);
   --dsa-nav-flyout__label--color_active: var(--ks-text-color-interface-interactive-active);
-  --dsa-nav-flyout__label--background-color_hover: unset;
-  --dsa-nav-flyout__label--background-color_active: unset;
   --dsa-nav-flyout__label--font: var(--ks-font-interface-l);
-  --dsa-nav-flyout__label--font-family: var(--ks-font-family-display);
   --dsa-nav-flyout__label--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-nav-flyout__label--font-weight_active: var(--ks-font-weight-bold);
   --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.8;
-  --dsa-nav-flyout__label--transition: var(--ks-transition-hover);
-  --dsa-nav-flyout__label--transition-property: background-color, color, opacity;
   --dsa-nav-flyout__sublist--padding: 0.25em 0 0.5em 0.75em;
   --dsa-nav-flyout__sublist__label--color: var(--ks-color-fg);
-  --dsa-nav-flyout__sublist__label--font: var(--ks-font-interface-l);
-  --dsa-nav-flyout__sublist__label--font-family: var(--ks-font-family-display);
+  --dsa-nav-flyout__sublist__label--font: var(--ks-font-interface-m);
   --dsa-nav-flyout__sublist__label--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-nav-flyout__sublist__label--padding: 0.25em 0;
 }
@@ -36,18 +30,18 @@
   font: var(--dsa-nav-flyout__label--font);
   flex-direction: column;
   gap: var(--dsa-nav-flyout--gap);
-  top: var(--dsa-header--height);
-  opacity: 0;
-  left: 0;
+  left: -100%;
+  height: 100vh;
   overflow: hidden;
   position: fixed;
-  width: 100%;
+  width: 78vw;
   transition: all var(--ks-duration-slow);
-  transition-delay: 100ms;
   padding: var(--dsa-nav-flyout--padding);
   right: 0;
   bottom: 0;
+  top: 0;
   overflow-y: auto;
+  background: var(--dsa-nav-flyout--background);
   backface-visibility: hidden;
   -webkit-overflow-scrolling: touch;
   max-width: var(--dsa-nav-flyout--max-width);
@@ -56,19 +50,16 @@
   padding: 0;
   margin: 0;
 }
-.dsa-header--floating .dsa-nav-flyout {
-  border-radius: var(--ks-border-radius-surface);
-  padding: 0 var(--dsa-header_floating--spacing-horizontal);
-}
 .overlay-open .dsa-nav-flyout {
-  opacity: 1;
+  left: 0;
+  box-shadow: var(--dsa-nav-flyout--shadow);
 }
 .dsa-nav-flyout .dsa-nav-flyout__logo {
   margin-top: var(--dsa-header--spacing-vertical);
   margin-bottom: var(--dsa-header--spacing-vertical);
 }
 .dsa-nav-flyout .dsa-nav-flyout__list {
-  padding-top: var(--ks-spacing-xs);
+  padding-top: calc(var(--dsa-header--spacing-vertical) - var(--ks-spacing-s));
   padding-bottom: 15vh;
 }
 .dsa-nav-flyout .dsa-nav-flyout__list:hover .dsa-nav-flyout__item:not(:hover, .dsa-nav-flyout__item--active) .dsa-nav-flyout__label {
@@ -82,32 +73,27 @@
 .dsa-nav-flyout .dsa-nav-flyout__item--active.dsa-nav-flyout__item > .dsa-nav-flyout__label {
   font-weight: var(--dsa-nav-flyout__label--font-weight_active);
   color: var(--dsa-nav-flyout__label--color_active);
-  background-color: var(--dsa-nav-flyout__label--background-color_active);
+}
+.dsa-nav-flyout .dsa-nav-flyout__item:hover > .dsa-nav-sublist {
+  display: flex;
 }
 .dsa-nav-flyout .dsa-nav-flyout__label {
   text-decoration: var(--dsa-nav-flyout__label--text-decoration);
-  display: block;
-  width: fit-content;
+  display: flex;
   font: var(--dsa-nav-flyout__label--font);
-  font-family: var(--dsa-nav-flyout__label--font-family);
   font-weight: var(--dsa-nav-flyout__label--font-weight);
   color: var(--dsa-nav-flyout__label--color);
   height: 100%;
   align-items: center;
   padding: var(--dsa-nav-flyout__label--padding);
-  transition: var(--dsa-nav-flyout__label--transition);
-  transition-property: var(--dsa-nav-flyout__label--transition-property);
 }
 .dsa-nav-flyout .dsa-nav-flyout__label:hover, .dsa-nav-flyout .dsa-nav-flyout__label:focus, .dsa-nav-flyout .dsa-nav-flyout__label:active {
   color: var(--dsa-nav-flyout__label--color_hover);
-  background-color: var(--dsa-nav-flyout__label--background-color_hover);
   text-decoration: var(--dsa-nav-flyout__label--text-decoration_hover);
 }
 .dsa-nav-flyout .dsa-nav-flyout__sublist {
   padding: var(--dsa-nav-flyout__sublist--padding);
   font: var(--dsa-nav-flyout__sublist__label--font);
-  font-family: var(--dsa-nav-flyout__label--font-family);
-  font-weight: var(--dsa-nav-flyout__sublist__label--font-weight);
 }
 .dsa-nav-flyout .dsa-nav-flyout__sublist .dsa-nav-flyout__label {
   font: inherit;

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

@@ -9,7 +9,7 @@
       "items": {
         "type": "object",
         "properties": {
-          "url": {
+          "href": {
             "type": "string",
             "format": "uri"
           },
@@ -24,7 +24,7 @@
             "items": {
               "type": "object",
               "properties": {
-                "url": {
+                "href": {
                   "type": "string",
                   "format": "uri"
                 },
@@ -41,7 +41,7 @@
         },
         "additionalProperties": false,
         "required": [
-          "url",
+          "href",
           "label"
         ]
       },
@@ -49,43 +49,43 @@
         [
           {
             "label": "Active Item",
-            "url": "#",
+            "href": "#",
             "active": true
           },
           {
             "label": "Navigation Item",
-            "url": "#"
+            "href": "#"
           },
           {
             "label": "Dropdown",
-            "url": "#",
+            "href": "#",
             "items": [
               {
                 "label": "Level 2 Item",
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "Active Item",
                 "active": true,
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "An Item with a longer Label",
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "And One last one",
-                "url": "#"
+                "href": "#"
               }
             ]
           },
           {
             "label": "One more Item",
-            "url": "#"
+            "href": "#"
           },
           {
             "label": "Last Item",
-            "url": "#"
+            "href": "#"
           }
         ]
       ]
@@ -151,9 +151,15 @@
           "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,

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

@@ -24,9 +24,9 @@ type ToggleCTA = boolean;
  */
 type Label = string;
 /**
- * The URL to link to when the button is clicked
+ * Target that should be linked, makes the button behave like a link semantically
  */
-type URL = string;
+type Target = string;
 interface NavMainProps {
     /**
      * Referenced component LogoProps
@@ -35,11 +35,11 @@ interface NavMainProps {
     flyoutInverted?: FlyoutInverted;
     dropdownInverted?: DropdownInverted;
     items?: {
-        url: string;
+        href: string;
         label: string;
         active?: boolean;
         items?: {
-            url?: string;
+            href?: string;
             label?: string;
             active?: boolean;
         }[];
@@ -52,7 +52,7 @@ interface NavMainProps {
 interface CTA {
     toggle?: ToggleCTA;
     label?: Label;
-    url?: URL;
+    target?: Target;
 }
 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>>>;

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

@@ -6,7 +6,6 @@ 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 { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '@kickstartds/core/lib/component';
 import './js/body.client.js';
 import '@kickstartds/core/lib/core';
@@ -14,21 +13,14 @@ import 'classnames';
 import '@kickstartds/base/lib/link';
 import '@kickstartds/base/lib/icon';
 import '../nav-dropdown/index.js';
-
-const defaults = {
-    "flyoutInverted": false,
-    "dropdownInverted": false,
-    "items": [],
-    "cta": {
-        "toggle": false
-    }
-};
+import '../logo/index.js';
+import '@kickstartds/base/lib/picture';
 
 const NavMainContextDefault = forwardRef(({ logo, items, flyoutInverted, dropdownInverted }, ref) => items && items.length > 0 ? (jsxs("div", { ref: ref, className: "dsa-nav-main", children: [jsx(NavToggle, {}), jsx(NavTopbar, { items: items, inverted: dropdownInverted }), jsx(NavFlyout, { items: items, inverted: flyoutInverted, logo: logo })] })) : null);
 const NavMainContext = createContext(NavMainContextDefault);
 const NavMain = forwardRef((props, ref) => {
     const Component = useContext(NavMainContext);
-    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+    return jsx(Component, { ...props, ref: ref });
 });
 NavMain.displayName = "NavMain";
 

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

@@ -59,6 +59,9 @@
           "title": "Additional Classes",
           "description": "Add additional css classes that should be applied to the logo",
           "type": "string"
+        },
+        "type": {
+          "const": "logo"
         }
       },
       "additionalProperties": false
@@ -80,7 +83,7 @@
       "items": {
         "type": "object",
         "properties": {
-          "url": {
+          "href": {
             "type": "string",
             "format": "uri"
           },
@@ -95,7 +98,7 @@
             "items": {
               "type": "object",
               "properties": {
-                "url": {
+                "href": {
                   "type": "string",
                   "format": "uri"
                 },
@@ -112,7 +115,7 @@
         },
         "additionalProperties": false,
         "required": [
-          "url",
+          "href",
           "label"
         ]
       },
@@ -120,43 +123,43 @@
         [
           {
             "label": "Active Item",
-            "url": "#",
+            "href": "#",
             "active": true
           },
           {
             "label": "Navigation Item",
-            "url": "#"
+            "href": "#"
           },
           {
             "label": "Dropdown",
-            "url": "#",
+            "href": "#",
             "items": [
               {
                 "label": "Level 2 Item",
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "Active Item",
                 "active": true,
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "An Item with a longer Label",
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "And One last one",
-                "url": "#"
+                "href": "#"
               }
             ]
           },
           {
             "label": "One more Item",
-            "url": "#"
+            "href": "#"
           },
           {
             "label": "Last Item",
-            "url": "#"
+            "href": "#"
           }
         ]
       ]
@@ -180,14 +183,17 @@
             "Book a meeting"
           ]
         },
-        "url": {
+        "target": {
           "type": "string",
-          "title": "URL",
-          "description": "The URL to link to when the button is clicked",
+          "title": "Target",
+          "description": "Target that should be linked, makes the button behave like a link semantically",
           "format": "uri"
         }
       },
       "additionalProperties": false
+    },
+    "type": {
+      "const": "nav-main"
     }
   },
   "additionalProperties": false,

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

@@ -24,7 +24,7 @@
       "items": {
         "type": "object",
         "properties": {
-          "url": { "type": "string", "format": "uri" },
+          "href": { "type": "string", "format": "uri" },
           "label": { "type": "string" },
           "active": { "type": "boolean" },
           "items": {
@@ -32,7 +32,7 @@
             "items": {
               "type": "object",
               "properties": {
-                "url": { "type": "string", "format": "uri" },
+                "href": { "type": "string", "format": "uri" },
                 "label": { "type": "string" },
                 "active": { "type": "boolean" }
               }
@@ -40,49 +40,49 @@
           }
         },
         "additionalProperties": false,
-        "required": ["url", "label"]
+        "required": ["href", "label"]
       },
       "examples": [
         [
           {
             "label": "Active Item",
-            "url": "#",
+            "href": "#",
             "active": true
           },
           {
             "label": "Navigation Item",
-            "url": "#"
+            "href": "#"
           },
           {
             "label": "Dropdown",
-            "url": "#",
+            "href": "#",
             "items": [
               {
                 "label": "Level 2 Item",
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "Active Item",
                 "active": true,
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "An Item with a longer Label",
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "And One last one",
-                "url": "#"
+                "href": "#"
               }
             ]
           },
           {
             "label": "One more Item",
-            "url": "#"
+            "href": "#"
           },
           {
             "label": "Last Item",
-            "url": "#"
+            "href": "#"
           }
         ]
       ]
@@ -101,8 +101,8 @@
         "label": {
           "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/label"
         },
-        "url": {
-          "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/url"
+        "target": {
+          "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/target"
         }
       }
     }

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

@@ -2,7 +2,7 @@ import "./nav-toggle.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 
-const NavToggleContextDefault = forwardRef((_, ref) => (jsxs("button", { ref: ref, type: "button", className: "dsa-nav-toggle", id: "toggle-sidebar", "aria-controls": "dsa-nav-flyout", "aria-expanded": "false", "ks-component": "base.nav-toggle", children: [jsx("span", { className: "dsa-nav-toggle__label", children: "Open main 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);

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

@@ -12,11 +12,11 @@ import { HTMLAttributes } from "react";
 type DropdownInverted = boolean;
 interface NavTopbarProps {
     items?: {
-        url: string;
+        href: string;
         label: string;
         active?: boolean;
         items?: {
-            url?: string;
+            href?: string;
             label?: string;
             active?: boolean;
         }[];

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

@@ -5,20 +5,14 @@ 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';
-import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 
-const defaults = {
-    "items": [],
-    "inverted": false
-};
-
-const NavTopbarContextDefault = forwardRef(({ items, inverted }, ref) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-topbar", id: "dsa-nav-topbar", "aria-label": "Main Navigation", ref: ref, children: jsx("ul", { className: "dsa-nav-topbar__list", children: items.map(({ label, url, 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", { className: "dsa-nav-topbar__label", children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-topbar__label__icon", icon: "chevron-down", role: "presentation", "aria-hidden": true, focusable: false })) : ("")] })) : (jsx(Link, { href: url, className: `dsa-nav-topbar__label dsa-nav-topbar__link`, children: label })), subItems?.length ? (jsx(NavDropdown, { items: subItems, inverted: inverted })) : null] }, url));
+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, { ...deepMergeDefaults(defaults, props), ref: ref });
+    return jsx(Component, { ...props, ref: ref });
 });
 NavTopbar.displayName = "NavTopbar";