@kickstartds/ds-agency-premium 1.6.71 → 1.6.72--canary.43.2474.0

package/dist/components/html/index.js

@@ -5,8 +5,15 @@ import classnames from 'classnames';
 import { Button } from '@kickstartds/base/lib/button';
 import { RichText } from '@kickstartds/base/lib/rich-text';
 import './Html.client.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '@kickstartds/core/lib/component';
 
+const defaults = {
+    "consent": false,
+    "consentAspectRatio": "16:9",
+    "inverted": false
+};
+
 const HtmlContextDefault = forwardRef(({ html, consent, consentText, consentBackgroundImage, consentButtonLabel, consentAspectRatio = "16:9", inverted, className, component = "dsa.html", ...props }, ref) => {
     return (jsxs("div", { ref: ref, className: classnames("dsa-html", className), "ks-component": component, "ks-inverted": inverted ? "true" : undefined, ...props, children: [jsx("template", { dangerouslySetInnerHTML: { __html: html } }), consent && (jsxs("div", { style: {
                     backgroundImage: consentBackgroundImage
@@ -22,7 +29,7 @@ const HtmlContextDefault = forwardRef(({ html, consent, consentText, consentBack
 const HtmlContext = createContext(HtmlContextDefault);
 const Html = forwardRef((props, ref) => {
     const Component = useContext(HtmlContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Html.displayName = "Html";
 

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

@@ -1,16 +1,23 @@
 .dsa-image-story.c-storytelling {
   --dsa-image-story--gap: var(--ks-spacing-m);
-  --dsa-image-story--horizontal-padding: var(--dsa-content--spacing);
+  --dsa-image-story--horizontal-padding: var(--dsa-content--horizontal-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);
+  --dsa-image-story__copy--font: var(--ks-font-copy-m);
+  --dsa-image-story__copy--color: var(--ks-text-color-copy);
 }
 
 .c-storytelling.dsa-image-story {
   gap: var(--c-storytelling--horizontal-padding);
-  --c-storytelling--horizontal-padding: var(--dsa-image-story--horizontal-padding, var(--dsa-content--spacing));
+  --c-storytelling--horizontal-padding: var(
+    --dsa-image-story--horizontal-padding,
+    var(--dsa-content--horizontal-spacing)
+  );
   --c-storytelling--vertical-padding: var(--dsa-image-story--vertical-padding, var(--ks-spacing-xl));
 }
+.c-storytelling.dsa-image-story .c-storytelling__box.c-storytelling__box--top .c-storytelling__box__content {
+  top: var(--ks-spacing-m);
+  position: sticky;
+}
 .c-storytelling.dsa-image-story .c-storytelling__box__content {
   max-width: var(--dsa-content--width_narrow);
 }
@@ -27,8 +34,8 @@
   aspect-ratio: 1/1;
 }
 .c-storytelling.dsa-image-story .c-rich-text {
-  font: var(--dsa-image-story__copy--font, var(--dsa-rich-text--font));
-  color: var(--dsa-image-story__copy--color, var(--dsa-rich-text--color));
+  font: var(--dsa-image-story__copy--font, var(--ks-font-copy-m));
+  color: var(--dsa-image-story__copy--color, var(--ks-text-color-copy));
 }
 .c-storytelling.dsa-image-story .c-storytelling__box,
 .c-storytelling.dsa-image-story .c-storytelling__image {

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

@@ -69,10 +69,10 @@
               "Book a meeting"
             ]
           },
-          "target": {
+          "url": {
             "type": "string",
-            "title": "Target",
-            "description": "Target that should be linked, makes the button behave like a link semantically",
+            "title": "URL",
+            "description": "The URL to link to when the button is clicked",
             "format": "uri"
           },
           "variant": {
@@ -110,7 +110,13 @@
             "default": false
           },
           "type": {
-            "const": "button"
+            "type": "string",
+            "title": "Button Type",
+            "enum": [
+              "button",
+              "submit",
+              "reset"
+            ]
           }
         },
         "additionalProperties": false,
@@ -170,9 +176,6 @@
       ],
       "type": "string",
       "default": "left"
-    },
-    "type": {
-      "const": "image-story"
     }
   },
   "additionalProperties": false

package/dist/components/image-story/index.js

@@ -5,8 +5,21 @@ import { Storytelling } from '@kickstartds/content/lib/storytelling';
 import { ButtonContext } from '@kickstartds/base/lib/button';
 import classnames from 'classnames';
 import { useButtonGroup } from '../button-group/index.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '@kickstartds/base/lib/button-group';
 
+const defaults = {
+    "largeHeadline": false,
+    "layout": "imageLeft",
+    "padding": false,
+    "buttons": [],
+    "image": {
+        "aspectRatio": "unset",
+        "vAlign": "top"
+    },
+    "textAlign": "left"
+};
+
 const ImageStoryContextDefault = forwardRef(({ headline, largeHeadline = false, sub, image, padding = false, textAlign = "left", layout = "textLeft", buttons = [], text, ...rest }, ref) => {
     const ButtonGroup = useButtonGroup();
     return (jsx(ButtonContext.Provider
@@ -46,7 +59,7 @@ const ImageStoryContextDefault = forwardRef(({ headline, largeHeadline = false,
 const ImageStoryContext = createContext(ImageStoryContextDefault);
 const ImageStory = forwardRef((props, ref) => {
     const Component = useContext(ImageStoryContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 ImageStory.displayName = "ImageStory";
 

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

@@ -1,13 +1,13 @@
 .dsa-image-text {
-  --dsa-image-text--font: var(--dsa-rich-text--font);
-  --dsa-image-text--color: var(--dsa-rich-text--color);
+  --dsa-image-text--font: var(--ks-font-copy-m);
+  --dsa-image-text--color: var(--ks-text-color-copy);
   --dsa-image-text_highlight--font: var(--ks-font-copy-l);
   --dsa-image-text_highlight--color: var(--ks-text-color-default);
 }
 
 .dsa-image-text .c-rich-text {
-  --c-rich-text--font: var(--dsa-image-text--font, var(--dsa-rich-text--font), var(--ks-font-copy-m));
-  --c-rich-text--color: var(--dsa-image-text--color, var(--dsa-rich-text--color), var(--ks-text-color-default));
+  --c-rich-text--font: var(--dsa-image-text--font, var(--ks-font-copy-m));
+  --c-rich-text--color: var(--dsa-image-text--color, var(--ks-text-color-default));
 }
 .dsa-image-text--highlight.dsa-image-text .c-rich-text {
   --c-rich-text--font: var(--dsa-image-text_highlight--font, var(--ks-font-copy-l));

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

@@ -56,9 +56,6 @@
       "examples": [
         "above"
       ]
-    },
-    "type": {
-      "const": "image-text"
     }
   },
   "required": [

package/dist/components/image-text/index.js

@@ -4,6 +4,12 @@ import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { TextMediaContextDefault, TextMediaContext } from '@kickstartds/base/lib/text-media';
 import { Container } from '@kickstartds/core/lib/container';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {
+    "highlightText": false,
+    "image": {}
+};
 
 const ImageTextContextDefault = forwardRef(({ text, image, layout, highlightText, ...rest }, ref) => (jsx(Container, { name: "text-media", ref: ref, children: jsx(TextMediaContextDefault, { ...rest, className: classnames(highlightText ? "dsa-image-text--highlight" : "", "dsa-image-text"), text: text, media: [
             {
@@ -19,7 +25,7 @@ const ImageTextContextDefault = forwardRef(({ text, image, layout, highlightText
 const ImageTextContext = createContext(ImageTextContextDefault);
 const ImageText = forwardRef((props, ref) => {
     const Component = useContext(ImageTextContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 ImageText.displayName = "ImageText";
 const ImageTextProvider = (props) => (jsx(TextMediaContext.Provider, { ...props, value: ImageTextContextDefault }));

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-e22382f1.js";
-import { FooterProps } from "../../FooterProps-171a3067.js";
+import { HeaderProps } from "../../HeaderProps-72763967.js";
+import { FooterProps } from "../../FooterProps-a0a104ca.js";
 import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
 /**
  * Content of the icon sprite for this project
@@ -33,3 +33,4 @@ export * from "../../BlogPostProps-6b3cff22.js";
 export * from "../../BlogOverviewProps-9f207f1c.js";
 export * from "../../PageProps-aa29c554.js";
 export { IconSprite, SettingsProps };
+export * from "../../EventDetailProps-42a7eebe.js";

package/dist/components/logo/index.js

@@ -4,6 +4,11 @@ import classnames from 'classnames';
 import { forwardRef, createContext, useContext } from 'react';
 import { Picture } from '@kickstartds/base/lib/picture';
 import { Link } from '@kickstartds/base/lib/link';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {
+    "homepageHref": "/"
+};
 
 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 }) }));
@@ -11,7 +16,7 @@ const LogoContextDefault = forwardRef(({ src, srcInverted, alt, inverted = false
 const LogoContext = createContext(LogoContextDefault);
 const Logo = forwardRef((props, ref) => {
     const Component = useContext(LogoContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Logo.displayName = "Logo";
 

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

@@ -53,9 +53,6 @@
       "title": "Additional Classes",
       "description": "Add additional css classes that should be applied to the logo",
       "type": "string"
-    },
-    "type": {
-      "const": "logo"
     }
   },
   "additionalProperties": false

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { LogosProps } from "../../LogosProps-f9474fe2.js";
+import { LogosProps } from "../../LogosProps-d4677d2c.js";
 declare const LogosContextDefault: import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const LogosContext: import("react").Context<import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Logos: import("react").ForwardRefExoticComponent<LogosProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/logos/index.js

@@ -6,12 +6,23 @@ import { LogoTiles } from '@kickstartds/content/lib/logo-tiles';
 import { Button } from '@kickstartds/base/lib/button';
 import { Link } from '@kickstartds/base/lib/link';
 import { Container } from '@kickstartds/core/lib/container';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 
-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 defaults = {
+    "logo": [],
+    "align": "center",
+    "cta": {
+        "toggle": false,
+        "link": "#",
+        "style": "text"
+    }
+};
+
+const LogosContextDefault = forwardRef(({ logo: logos = [], tagline, align = "center", 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);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Logos.displayName = "Logos";
 

package/dist/components/logos/logos.css

@@ -8,21 +8,21 @@
   --dsa-logos__tagline--font: var(--dsa-headline_h3--font);
   --dsa-logos__tagline--font-weight: var(--dsa-headline--font-weight);
   --dsa-logos__tagline--color: var(--dsa-headline--color);
-  --dsa-logos__grid--gap-horizontal: var(--ks-spacing-inline-l);
-  --dsa-logos__grid--gap-vertical: var(--ks-spacing-stack-s);
+  --dsa-logos__grid--gap-horizontal: var(--ks-spacing-xxl);
+  --dsa-logos__grid--gap-vertical: var(--ks-spacing-stack-m);
   --dsa-logos__grid_mobile--cols: 2;
   --dsa-logos__grid_tablet--cols: 3;
 }
 
+.dsa-logos .c-logo-tiles {
+  --c-logo-tiles--cols: var(--dsa-logo-tiles--cols);
+  --c-logo-tiles--gutter: var(--dsa-logos__grid--gap-horizontal);
+}
 .dsa-logos {
   display: flex;
   flex-direction: column;
   gap: var(--dsa-logos-gap, var(--ks-spacing-stack-m));
 }
-.dsa-logos .c-logo-tiles {
-  --c-logo-tiles--cols: var(--dsa-logo-tiles--cols);
-  --c-logo-tiles--gutter: var(--dsa-logos__grid--gap-horizontal);
-}
 .dsa-logos__tagline {
   font: var(--dsa-logos__tagline--font, var(--ks-font-display-m));
   font-weight: var(--dsa-logos__tagline--font-weight, var(--dsa-headline--font-weight));
@@ -58,8 +58,6 @@
 }
 .dsa-logos .dsa-logo-tiles {
   --dsa-logo-tiles--cols: var(--dsa-logos__grid_mobile--cols, 2);
-  gap: var(--dsa-logos__grid--gap-vertical) var(--dsa-logos__grid--gap-horizontal);
-  margin: 0;
 }
 @container logo-tiles (min-width: 420px) {
   .dsa-logos .dsa-logo-tiles {
@@ -92,6 +90,10 @@
     --dsa-logo-tiles--cols: 8;
   }
 }
+.dsa-logos .dsa-logo-tiles {
+  gap: var(--dsa-logos__grid--gap-vertical) var(--dsa-logos__grid--gap-horizontal);
+  margin: 0;
+}
 .dsa-logos .dsa-logo-tiles .c-logo-tiles__col {
   margin: 0;
   aspect-ratio: 16/9;

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

@@ -28,12 +28,12 @@
             "title": "URL",
             "description": "The URL of the logo image",
             "examples": [
-              "img/logos/logoipsum-212.svg",
-              "img/logos/logoipsum-217.svg",
-              "img/logos/logoipsum-239.svg",
-              "img/logos/logoipsum-244.svg",
-              "img/logos/logoipsum-250.svg",
-              "img/logos/logoipsum-286.svg"
+              "img/logos/logoipsum-344.svg",
+              "img/logos/logoipsum-347.svg",
+              "img/logos/logoipsum-352.svg",
+              "img/logos/logoipsum-356.svg",
+              "img/logos/logoipsum-358.svg",
+              "img/logos/logoipsum-369.svg"
             ]
           },
           "alt": {
@@ -50,8 +50,7 @@
           "src"
         ]
       },
-      "minItems": 1,
-      "maxItems": 20
+      "minItems": 1
     },
     "align": {
       "type": "string",
@@ -122,9 +121,6 @@
         "link",
         "label"
       ]
-    },
-    "type": {
-      "const": "logos"
     }
   },
   "additionalProperties": false,

package/dist/components/logos/logos.schema.json

@@ -26,12 +26,12 @@
             "title": "URL",
             "description": "The URL of the logo image",
             "examples": [
-              "img/logos/logoipsum-212.svg",
-              "img/logos/logoipsum-217.svg",
-              "img/logos/logoipsum-239.svg",
-              "img/logos/logoipsum-244.svg",
-              "img/logos/logoipsum-250.svg",
-              "img/logos/logoipsum-286.svg"
+              "img/logos/logoipsum-344.svg",
+              "img/logos/logoipsum-347.svg",
+              "img/logos/logoipsum-352.svg",
+              "img/logos/logoipsum-356.svg",
+              "img/logos/logoipsum-358.svg",
+              "img/logos/logoipsum-369.svg"
             ]
           },
           "alt": {
@@ -44,8 +44,7 @@
         "additionalProperties": false,
         "required": ["src"]
       },
-      "minItems": 1,
-      "maxItems": 20
+      "minItems": 1
     },
     "align": {
       "type": "string",

package/dist/components/mosaic/index.js

@@ -2,6 +2,13 @@ import "./mosaic.css";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import { Storytelling } from '@kickstartds/content/lib/storytelling';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {
+    "layout": "alternate",
+    "largeHeadlines": false,
+    "tile": []
+};
 
 const MosaicContextDefault = forwardRef(({ layout, largeHeadlines, tile, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: "dsa-mosaic", children: tile.map((tile, index) => (jsx(Storytelling, { full: true, backgroundColor: tile.backgroundColor, backgroundImage: tile.backgroundImage, box: {
             headline: {
@@ -14,7 +21,7 @@ const MosaicContextDefault = forwardRef(({ layout, largeHeadlines, tile, ...rest
             textColor: tile?.textColor,
             ...(tile?.button?.toggle && {
                 link: {
-                    target: tile?.button?.target,
+                    url: tile?.button?.url,
                     label: tile?.button?.label,
                     icon: tile?.button?.icon,
                 },
@@ -33,7 +40,7 @@ const MosaicContextDefault = forwardRef(({ layout, largeHeadlines, tile, ...rest
 const MosaicContext = createContext(MosaicContextDefault);
 const Mosaic = forwardRef((props, ref) => {
     const Component = useContext(MosaicContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Mosaic.displayName = "Mosaic";
 

package/dist/components/mosaic/mosaic.css

@@ -1,12 +1,11 @@
 .dsa-mosaic {
   --dsa-mosaic--vertical-padding: var(--l-section--space-default);
-  --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--horizontal-padding: var(--dsa-content--horizontal-spacing);
+  --dsa-mosaic__copy--font: var(--ks-font-copy-m);
+  --dsa-mosaic__copy--color: var(--ks-text-color-copy);
   --dsa-mosaic__headline--color: var(--dsa-headline--color);
   --dsa-mosaic__headline--font: var(--dsa-headline_h2--font);
   --dsa-mosaic__subheadline--color: var(--dsa-headline__subheadline--color);
-  --dsa-mosaic__subheadline--font: var(--dsa-headline-font-copy-xs);
 }
 
 .dsa-mosaic .dsa-headline__headline {
@@ -15,13 +14,12 @@
   font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-semi-bold));
 }
 .dsa-mosaic .dsa-headline__subheadline {
-  font: var(--dsa-mosaic__subheadline--font, var(--dsa-headline_h2__subheadline--font, var(--ks-font-display-xl)));
   color: var(--dsa-mosaic__subheadline--color, var(--ks-text-color-primary));
   font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-medium));
 }
 .dsa-mosaic .c-rich-text {
-  font: var(--dsa-mosaic__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
-  color: var(--dsa-mosaic__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-copy)));
+  font: var(--dsa-mosaic__copy--font, var(--ks-font-copy-m));
+  color: var(--dsa-mosaic__copy--color, var(--ks-text-color-copy));
 }
 .dsa-mosaic .c-storytelling__box__content {
   max-width: var(--dsa-content--width_narrow);

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

@@ -86,10 +86,10 @@
                   "Book a meeting"
                 ]
               },
-              "target": {
+              "url": {
                 "type": "string",
-                "title": "Target",
-                "description": "Target that should be linked, makes the button behave like a link semantically",
+                "title": "URL",
+                "description": "The URL to link to when the button is clicked",
                 "format": "uri"
               },
               "icon": {
@@ -118,9 +118,6 @@
             "description": "Overwrite the color to use for the text content",
             "type": "string",
             "format": "color"
-          },
-          "type": {
-            "const": "tile"
           }
         },
         "additionalProperties": false,
@@ -131,9 +128,6 @@
       },
       "minItems": 1,
       "maxItems": 20
-    },
-    "type": {
-      "const": "mosaic"
     }
   },
   "additionalProperties": false

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

@@ -12,7 +12,7 @@ type DropdownInverted = boolean;
 interface NavDropdownProps {
     inverted?: DropdownInverted;
     items?: {
-        href?: string;
+        url?: 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, 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));
+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));
     }) }));
 
 export { NavDropdown };

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

@@ -1,6 +1,11 @@
 .dsa-nav-dropdown {
-  --dsa-nav-dropdown--padding: var(--ks-spacing-inset-stretch-xs);
+  --dsa-nav-dropdown--padding: var(--ks-spacing-xxs) var(--ks-spacing-xxs) var(--ks-spacing-m) var(--ks-spacing-xxs);
   --dsa-nav-dropdown--background: var(--ks-background-color-default);
+}
+.dsa-nav-dropdown[ks-inverted=true] {
+  --dsa-nav-dropdown--background: var(--ks-color-fg-inverted);
+}
+.dsa-nav-dropdown {
   --dsa-nav-dropdown--border-radius: var(--ks-border-radius-card);
   --dsa-nav-dropdown--box-shadow: var(--ks-box-shadow-card);
   --dsa-nav-dropdown--border: 1px solid var(--ks-border-color-card);
@@ -8,19 +13,21 @@
   --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--font: var(--ks-font-interface-m);
+  --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-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.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);
+  --dsa-nav-dropdown__label--padding: 0.45em 0.75em;
+  --dsa-nav-dropdown__label_dimmed--opacity: 1;
 }
 
 .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);
@@ -38,19 +45,23 @@
 }
 .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": {
-          "href": {
+          "url": {
             "type": "string",
             "format": "uri"
           },
@@ -31,9 +31,6 @@
     },
     "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?: {
-        href: string;
+        url: string;
         label: string;
         active?: boolean;
         items?: {
-            href?: string;
+            url?: string;
             label?: string;
             active?: boolean;
         }[];