@kickstartds/ds-agency-premium 1.6.68--canary.45.1723.0 → 1.6.68

package/dist/components/hero/hero.css

@@ -1,6 +1,6 @@
-.l-container--hero {
+.l-container--visual {
   /* stylelint-disable-next-line property-no-unknown */
-  container-name: hero;
+  container-name: visual;
 }
 
 .dsa-hero {
@@ -14,54 +14,34 @@
   --dsa-hero__copy--font: var(--dsa-rich-text--font);
   --dsa-hero_highlight-text__copy--font: var(--ks-font-copy-l);
   --dsa-hero_color-neutral__copy--color: var(--ks-text-color-default);
-  --dsa-hero__textbox--background-color: var(--dsa-overlay-box_transparent--background-color);
-  --dsa-hero__textbox--backdrop-filter: var(--dsa-overlay-box_transparent--backdrop-filter);
-  --dsa-hero__textbox--box-shadow: none;
-  --dsa-hero__textbox--border-radius: var(--ks-border-radius-card);
+  --dsa-hero__textbox--background-color: var(--ks-color-bg-alpha-2);
+  --dsa-hero__textbox--border-radius: var(--ks-border-radius-surface);
   --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
-  --dsa-hero_below__textbox--max-width: var(--dsa-content--width_default);
   --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
-  --dsa-hero__overlay--background: radial-gradient(
-    50% 125% at 100% 0%,
-    var(--ks-color-primary-alpha-5) 0%,
-    var(--ks-color-bg-alpha-4) 100%
-  );
-  --dsa-hero--below__overlay--background: linear-gradient(
-    0deg,
-    var(--ks-background-color-default) 15%,
-    transparent 50%
-  );
-  --dsa-hero--left__overlay--background: radial-gradient(
-    var(--dsa-hero__textbox--max-width) var(--dsa-hero__textbox--max-width) at
-      calc(var(--dsa-section__content--padding) * 2) 50%,
-    var(--ks-color-bg) 100%,
-    var(--ks-color-primary-alpha-5) 100%
-  );
-}
-@container hero (min-width: 640px) {
+  --dsa-hero__overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
+}
+@container visual (min-width: 640px) {
   .dsa-hero {
     --dsa-hero--min-height: 21rem;
     --dsa-hero--min-height_small: 13.35rem;
-    --dsa-hero__textbox--max-width: 50vw;
   }
 }
-@container hero (min-width: 960px) {
+@container visual (min-width: 960px) {
   .dsa-hero {
     --dsa-hero--min-height: 31.5rem;
     --dsa-hero--min-height_small: 15.8rem;
   }
 }
-@container hero (min-width: 1024px) {
+@container visual (min-width: 1024px) {
   .dsa-hero {
-    --dsa-hero--min-height: 42rem;
+    --dsa-hero--min-height: 35rem;
     --dsa-hero--min-height_small: 20rem;
-    --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
   }
 }
 
-.l-container--hero {
+.l-container--visual {
   /* stylelint-disable-next-line property-no-unknown */
-  container-name: hero;
+  container-name: visual;
 }
 
 .c-visual.dsa-hero {
@@ -70,12 +50,9 @@
   min-height: var(--dsa-hero--min-height);
 }
 .c-visual.dsa-hero .c-visual__box {
-  --c-visual_box--background: var(
-    --dsa-hero__textbox--background-color,
-    var(--dsa-overlay-box_transparent--background-color)
-  );
+  --c-visual_box--background: var(--dsa-hero__textbox--background-color, var(--ks-color-bg-alpha-2));
   --c-visual_box--color: var(--dsa-hero__copy--color, var(--ks-text-color-default));
-  --c-visual_box--border-radius: var(--dsa-hero__textbox--border-radius, var(--ks-border-radius-card));
+  --c-visual_box--border-radius: var(--dsa-hero__textbox--border-radius, var(--ks-border-radius-surface));
   --c-visual_box--padding: var(--dsa-hero__textbox--padding, var(--ks-spacing-inset-squish-xl));
   --c-visual_text--font: var(--dsa-hero__copy--font, var(--dsa-rich-text--font));
 }
@@ -90,32 +67,23 @@
 .c-visual.dsa-hero.c-visual--small {
   min-height: var(--dsa-hero--min-height_small);
 }
-@container hero (min-width: 640px) {
+@container visual (min-width: 640px) {
   .c-visual.dsa-hero {
-    --c-visual_overlay--background: var(
-      --dsa-hero__overlay--background,
-      radial-gradient(50% 125% at 100% 0%, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-bg-alpha-4) 100%)
+    --c-visual_overlay--background: radial-gradient(
+      50% 125% at 100% 0%,
+      var(--ks-color-primary-alpha-5) 0%,
+      var(--ks-color-bg-alpha-5) 100%
     );
   }
   .c-visual.dsa-hero.dsa-hero--content-below {
     --c-visual_overlay--background: var(
-      --dsa-hero--below__overlay--background,
-      linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
-    );
-  }
-  .c-visual.dsa-hero.dsa-hero--content-left {
-    --c-visual_overlay--background: var(
-      --dsa-hero--left__overlay--background,
+      --dsa-hero__overlay--background,
       linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
     );
   }
   .c-visual.dsa-hero .c-visual__box {
     --c-visual_box--max-width: var(--dsa-hero__textbox--max-width, var(--dsa-content--width_narrow));
   }
-  .c-visual.dsa-hero .c-visual__box:not(.c-visual__box--transparent) {
-    backdrop-filter: var(--dsa-hero__textbox--backdrop-filter, var(--dsa-overlay-box_transparent--backdrop-filter));
-    box-shadow: var(--dsa-hero__textbox--box-shadow, var(--ks-box-shadow-card));
-  }
 }
 
 .c-visual.dsa-hero .dsa-headline .dsa-headline__headline {
@@ -138,11 +106,7 @@
 .c-visual.dsa-hero .c-visual__content--indent {
   max-width: var(--dsa-content--width_wide);
 }
-.c-visual.dsa-hero .c-visual__continue-btn {
-  color: var(--dsa-overlay-text--text-color, var(--ks-color-fg));
-  filter: drop-shadow(var(--dsa-overlay-text--shadow, 0 0 10px var(--ks-color-bg-inverted-alpha-3-base)));
-}
-@container hero (min-width: 640px) {
+@container visual (min-width: 640px) {
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media {
     position: relative;
   }
@@ -150,17 +114,17 @@
     height: var(--c-visual--min-height);
   }
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content {
-    padding: 0 var(--dsa-content--horizontal-spacing);
+    padding: 0 var(--dsa-content--spacing);
     margin-top: -10%;
     position: relative;
   }
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box {
-    --c-visual_box--max-width: var(--dsa-hero_below__textbox--max-width, var(--dsa-content--width_default));
+    --c-visual_box--max-width: var(--dsa-content--width_default);
   }
   .c-visual.dsa-hero.c-visual--no-crop {
     --c-visual--min-height: 0;
   }
-  @container hero (min-width: 640px) {
+  @container visual (min-width: 640px) {
     .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {
       height: fit-content;
     }
@@ -172,7 +136,7 @@
   .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full {
     height: fit-content;
   }
-  @container hero (min-width: 640px) {
+  @container visual (min-width: 640px) {
     .c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image {
       height: fit-content;
     }

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

@@ -71,10 +71,10 @@
             "title": "Icon",
             "description": "Choose an icon"
           },
-          "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"
           }
         },
@@ -163,12 +163,6 @@
       "type": "string",
       "default": "bottom"
     },
-    "inverted": {
-      "type": "boolean",
-      "title": "Inverted",
-      "description": "Inverted color scheme for the box",
-      "default": false
-    },
     "type": {
       "const": "hero"
     }

package/dist/components/hero/hero.schema.json

@@ -58,8 +58,8 @@
           "icon": {
             "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/icon"
           },
-          "url": {
-            "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/url"
+          "target": {
+            "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/target"
           }
         }
       }
@@ -76,12 +76,6 @@
       "enum": ["center", "below", "left", "right", "corner"],
       "type": "string",
       "default": "bottom"
-    },
-    "inverted": {
-      "type": "boolean",
-      "title": "Inverted",
-      "description": "Inverted color scheme for the box",
-      "default": false
     }
   },
   "additionalProperties": false

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { HeroProps } from "../../HeroProps-40f6c7f5.js";
+import { HeroProps } from "../../HeroProps-f704d270.js";
 declare const HeroContextDefault: import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const HeroContext: import("react").Context<import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Hero: import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/hero/index.js

@@ -8,51 +8,51 @@ import { ButtonContext } from '@kickstartds/base/lib/button';
 import { useButtonGroup } from '../button-group/index.js';
 import '@kickstartds/base/lib/button-group';
 
-const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightText, textPosition = "center", colorNeutral, inverted, image, overlay, textbox, className, buttons = [], ...rest }, ref) => {
+const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightText, textPosition = "center", colorNeutral, image, overlay, textbox, className, buttons = [], ...rest }, ref) => {
     const ButtonGroup = useButtonGroup();
     return (jsx(ButtonContext.Provider
     // @ts-expect-error
     , { 
         // @ts-expect-error
-        value: ButtonGroup, children: jsx(Container, { name: "hero", children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { ...rest, ref: ref, className: classnames(`dsa-hero dsa-hero--content-${textPosition}`, highlightText ? `dsa-hero--highlight-text` : "", colorNeutral ? `dsa-hero--color-neutral` : "", className), height: height, overlay: overlay, skipButton: height === "fullScreen" ? true : false, inverted: true, box: {
-                        background: textbox === true ? "solid" : "transparent",
-                        enabled: true,
-                        vertical: textPosition === "below" || textPosition === "corner"
-                            ? "bottom"
+        value: ButtonGroup, children: jsx(Container, { name: "visual", children: jsx(VisualContextDefault, { ...rest, ref: ref, className: classnames(`dsa-hero dsa-hero--content-${textPosition}`, highlightText ? `dsa-hero--highlight-text` : "", colorNeutral ? `dsa-hero--color-neutral` : "", className), height: height, overlay: overlay, box: {
+                    background: textbox === true ? "solid" : "transparent",
+                    enabled: true,
+                    vertical: textPosition === "below" || textPosition === "corner"
+                        ? "bottom"
+                        : "center",
+                    horizontal: textPosition === "left" || textPosition === "corner"
+                        ? "left"
+                        : textPosition === "right"
+                            ? "right"
                             : "center",
-                        horizontal: textPosition === "left" || textPosition === "corner"
-                            ? "left"
-                            : textPosition === "right"
-                                ? "right"
-                                : "center",
-                        link: {
-                            // @ts-expect-error
-                            buttons,
-                            colorNeutral,
-                            enabled: buttons.length > 0,
-                            arrangement: textPosition === "below" || textPosition === "center"
-                                ? "center"
-                                : "left",
-                        },
-                        headline: {
-                            align: textPosition === "below" || textPosition === "center"
-                                ? "center"
-                                : "left",
-                            text: headline,
-                            sub: sub,
-                            level: "h3",
-                            style: highlightText ? "h1" : undefined,
-                        },
-                        text: text,
-                    }, media: {
-                        mode: "image",
-                        image: {
-                            srcMobile: image.srcMobile,
-                            srcTablet: image.srcTablet,
-                            srcDesktop: image.srcDesktop,
-                            src: image.src,
-                        },
-                    } }) }) }) }));
+                    link: {
+                        // @ts-expect-error
+                        buttons,
+                        colorNeutral,
+                        enabled: buttons.length > 0,
+                        arrangement: textPosition === "below" || textPosition === "center"
+                            ? "center"
+                            : "left",
+                    },
+                    headline: {
+                        align: textPosition === "below" || textPosition === "center"
+                            ? "center"
+                            : "left",
+                        text: headline,
+                        sub: sub,
+                        level: "h3",
+                        style: highlightText ? "h1" : undefined,
+                    },
+                    text: text,
+                }, media: {
+                    mode: "image",
+                    image: {
+                        srcMobile: image.srcMobile,
+                        srcTablet: image.srcTablet,
+                        srcDesktop: image.srcDesktop,
+                        src: image.src,
+                    },
+                } }) }) }));
 });
 const HeroContext = createContext(HeroContextDefault);
 const Hero = forwardRef((props, ref) => {

package/dist/components/image-story/image-story.css

@@ -1,6 +1,6 @@
 .dsa-image-story.c-storytelling {
   --dsa-image-story--gap: var(--ks-spacing-m);
-  --dsa-image-story--horizontal-padding: var(--dsa-content--horizontal-spacing);
+  --dsa-image-story--horizontal-padding: var(--dsa-content--spacing);
   --dsa-image-story--vertical-padding: var(--ks-spacing-xl);
   --dsa-image-story__copy--font: var(--dsa-rich-text--font);
   --dsa-image-story__copy--color: var(--dsa-rich-text--color);
@@ -8,10 +8,7 @@
 
 .c-storytelling.dsa-image-story {
   gap: var(--c-storytelling--horizontal-padding);
-  --c-storytelling--horizontal-padding: var(
-    --dsa-image-story--horizontal-padding,
-    var(--dsa-content--horizontal-spacing)
-  );
+  --c-storytelling--horizontal-padding: var(--dsa-image-story--horizontal-padding, var(--dsa-content--spacing));
   --c-storytelling--vertical-padding: var(--dsa-image-story--vertical-padding, var(--ks-spacing-xl));
 }
 .c-storytelling.dsa-image-story .c-storytelling__box__content {

package/dist/components/image-story/image-story.schema.dereffed.json

@@ -69,10 +69,10 @@
               "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"
           },
           "variant": {

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

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

@@ -4,8 +4,8 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { HeaderProps } from "../../HeaderProps-72763967.js";
-import { FooterProps } from "../../FooterProps-a0a104ca.js";
+import { HeaderProps } from "../../HeaderProps-e22382f1.js";
+import { FooterProps } from "../../FooterProps-171a3067.js";
 import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
 /**
  * Content of the icon sprite for this project
@@ -29,8 +29,7 @@ interface SettingsProps {
     seo: SeoProps;
     iconSprite?: IconSprite;
 }
-export * from "../../BlogPostProps-c760fd2a.js";
-export * from "../../BlogOverviewProps-7caa223c.js";
-export * from "../../PageProps-7caa223c.js";
+export * from "../../BlogPostProps-d9decb7c.js";
+export * from "../../BlogOverviewProps-9f207f1c.js";
+export * from "../../PageProps-aa29c554.js";
 export { IconSprite, SettingsProps };
-export * from "../../EventDetailProps-42a7eebe.js";

package/dist/components/logos/index.js

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

package/dist/components/mosaic/index.js

@@ -14,7 +14,7 @@ const MosaicContextDefault = forwardRef(({ layout, largeHeadlines, tile, ...rest
             textColor: tile?.textColor,
             ...(tile?.button?.toggle && {
                 link: {
-                    url: tile?.button?.url,
+                    target: tile?.button?.target,
                     label: tile?.button?.label,
                     icon: tile?.button?.icon,
                 },

package/dist/components/mosaic/mosaic.css

@@ -1,6 +1,6 @@
 .dsa-mosaic {
   --dsa-mosaic--vertical-padding: var(--l-section--space-default);
-  --dsa-mosaic--horizontal-padding: var(--dsa-content--horizontal-spacing);
+  --dsa-mosaic--horizontal-padding: var(--dsa-content--spacing);
   --dsa-mosaic__copy--font: var(--dsa-rich-text--font);
   --dsa-mosaic__copy--color: var(--ks-text-color-default);
   --dsa-mosaic__headline--color: var(--dsa-headline--color);

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

@@ -86,10 +86,10 @@
                   "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"
               },
               "icon": {

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

@@ -12,7 +12,7 @@ type DropdownInverted = boolean;
 interface NavDropdownProps {
     inverted?: DropdownInverted;
     items?: {
-        url?: string;
+        href?: string;
         label?: string;
         active?: boolean;
     }[];

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

@@ -3,8 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { Link } from '@kickstartds/base/lib/link';
 
-const NavDropdown = ({ items, inverted }) => (jsx("ul", { className: classnames(`dsa-nav-dropdown`), "ks-inverted": inverted?.toString(), children: items.map(({ label, active, url }) => {
-        return (jsx("li", { className: classnames("dsa-nav-dropdown__item", active && "dsa-nav-dropdown__item--active"), children: jsx(Link, { href: url, className: `dsa-nav-dropdown__label`, children: label }) }, url));
+const NavDropdown = ({ items, inverted }) => (jsx("ul", { className: classnames(`dsa-nav-dropdown`), "ks-inverted": inverted?.toString(), children: items.map(({ label, active, href }) => {
+        return (jsx("li", { className: classnames("dsa-nav-dropdown__item", active && "dsa-nav-dropdown__item--active"), children: jsx(Link, { href: href, className: `dsa-nav-dropdown__label`, children: label }) }, href));
     }) }));
 
 export { NavDropdown };

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-m);
-  --dsa-nav-dropdown__label--font-family: var(--ks-font-family-display);
   --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"
           },

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,14 +1,16 @@
 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 '@kickstartds/base/lib/picture';
 
-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);