@kickstartds/ds-agency-premium 1.6.68--canary.1587.98fc9e3.0 → 1.6.68--canary.1593.79f68de.0

package/dist/{BlogOverviewProps-9f207f1c.d.ts → BlogOverviewProps-7caa223c.d.ts}

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-a1b289ca.js";
+import { SectionProps } from "./SectionProps-7caa223c.js";
 import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
 import { CtaProps } from "./CtaProps-8a0dba0d.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";

package/dist/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-7caa223c.d.ts}

@@ -5,7 +5,7 @@
  */
 import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
 import { BlogAsideProps } from "./BlogAsideProps-d9decb7c.js";
-import { SectionProps } from "./SectionProps-a1b289ca.js";
+import { SectionProps } from "./SectionProps-7caa223c.js";
 import { CtaProps } from "./CtaProps-8a0dba0d.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/{HeroProps-f704d270.d.ts → HeroProps-aa4e6431.d.ts}

@@ -72,6 +72,10 @@ type AltText = string;
  * Choose the alginment of the module content
  */
 type ModuleAligment = "center" | "below" | "left" | "right" | "corner";
+/**
+ * Inverted color scheme for the box
+ */
+type Inverted = boolean;
 interface HeroProps {
     headline?: Headline;
     sub?: ModuleSubheadline;
@@ -84,6 +88,7 @@ interface HeroProps {
     overlay?: GridLayer;
     image?: BackgroundImage;
     textPosition?: ModuleAligment;
+    inverted?: Inverted;
 }
 interface Button {
     label?: Label;
@@ -101,4 +106,4 @@ interface BackgroundImage {
     indent?: ImageIndent;
     alt?: AltText;
 }
-export { Headline, ModuleSubheadline, ModuleText, HighlightText, ColorNeutral, Height, Textbox, Label, Icon, Target, GridLayer, MobileImageSource, TabletImageSource, DesktopImageSource, OptionalSource, ImageIndent, AltText, ModuleAligment, HeroProps, Button, BackgroundImage };
+export { Headline, ModuleSubheadline, ModuleText, HighlightText, ColorNeutral, Height, Textbox, Label, Icon, Target, GridLayer, MobileImageSource, TabletImageSource, DesktopImageSource, OptionalSource, ImageIndent, AltText, ModuleAligment, Inverted, HeroProps, Button, BackgroundImage };

package/dist/{PageProps-aa29c554.d.ts → PageProps-7caa223c.d.ts}

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-a1b289ca.js";
+import { SectionProps } from "./SectionProps-7caa223c.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Collection of sections (with their contents) to render on the page

package/dist/{SectionProps-a1b289ca.d.ts → SectionProps-7caa223c.d.ts}

@@ -8,9 +8,9 @@ import { DividerProps } from "./DividerProps-2ef31901.js";
 import { FaqProps } from "./FaqProps-ad618cd5.js";
 import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
-import { HeroProps } from "./HeroProps-f704d270.js";
+import { HeroProps } from "./HeroProps-aa4e6431.js";
 import { HtmlProps } from "./HtmlProps-9d091769.js";
-import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";
@@ -19,7 +19,7 @@ import { StatsProps } from "./StatsProps-bf5ef578.js";
 import { TeaserCardProps } from "./TeaserCardProps-b9c28e78.js";
 import { TestimonialsProps } from "./TestimonialsProps-e344f597.js";
 import { TextProps } from "./TextProps-a23170d2.js";
-import { VideoCurtainProps } from "./VideoCurtainProps-6c625a69.js";
+import { VideoCurtainProps } from "./VideoCurtainProps-2b7b0265.js";
 import { ButtonProps } from "./ButtonProps-03ff6d21.js";
 /**
  * Width of section to use
@@ -28,11 +28,15 @@ type Width = "full" | "max" | "wide" | "default" | "narrow";
 /**
  * Style of background
  */
-type Style = "framed" | "deko" | "colorful" | "accentTransition" | "boldTransition";
+type Style = "framed" | "deko" | "colorful";
 /**
  * Color of background
  */
 type Style1 = "default" | "accent" | "bold";
+/**
+ * Color of background
+ */
+type Style2 = "none" | "to-default" | "to-accent" | "to-bold" | "to-inverted";
 /**
  * Background image for the whole section
  */
@@ -120,6 +124,7 @@ interface SectionProps {
     width?: Width;
     style?: Style;
     backgroundColor?: Style1;
+    transition?: Style2;
     backgroundImage?: BackgroundImage;
     spotlight?: Spotlight;
     spaceBefore?: SpaceBefore;
@@ -145,4 +150,4 @@ interface SectionProps {
     components?: Content;
     buttons?: Buttons;
 }
-export { Width, Style, Style1, BackgroundImage, Spotlight, SpaceBefore, SpaceAfter, Inverted, HeaderSpacing, Headline, LargeHeadline, HeadlineWidth, HeadlineTextAlignment, HeadlineAlignment, Subheadline, SwitchHeadlineOrder, ContentWidth, ContentAlignment, Gutter, Mode, TileWidth, Content, Buttons, SectionProps };
+export { Width, Style, Style1, Style2, BackgroundImage, Spotlight, SpaceBefore, SpaceAfter, Inverted, HeaderSpacing, Headline, LargeHeadline, HeadlineWidth, HeadlineTextAlignment, HeadlineAlignment, Subheadline, SwitchHeadlineOrder, ContentWidth, ContentAlignment, Gutter, Mode, TileWidth, Content, Buttons, SectionProps };

package/dist/SliderProps-8a0dba0d.d.ts

@@ -6,7 +6,7 @@
 import { CtaProps } from "./CtaProps-8a0dba0d.js";
 import { FeaturesProps } from "./FeaturesProps-e58616a5.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
-import { HeroProps } from "./HeroProps-f704d270.js";
+import { HeroProps } from "./HeroProps-aa4e6431.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { StatsProps } from "./StatsProps-bf5ef578.js";

package/dist/{VideoCurtainProps-6c625a69.d.ts → VideoCurtainProps-2b7b0265.d.ts}

@@ -54,7 +54,7 @@ type DesktopVideoSource = string;
 /**
  * Choose the alginment of the module content
  */
-type ModuleAligment = "center" | "left" | "right";
+type ModuleAligment = "center" | "below" | "left" | "right" | "corner";
 interface VideoCurtainProps {
     headline?: Headline;
     sub?: ModuleSubheadline;

package/dist/components/blog-overview/blog-overview.schema.dereffed.json

@@ -39,9 +39,7 @@
             "enum": [
               "framed",
               "deko",
-              "colorful",
-              "accentTransition",
-              "boldTransition"
+              "colorful"
             ]
           },
           "backgroundColor": {
@@ -55,6 +53,19 @@
             ],
             "default": "default"
           },
+          "transition": {
+            "type": "string",
+            "title": "Style",
+            "description": "Color of background",
+            "enum": [
+              "none",
+              "to-default",
+              "to-accent",
+              "to-bold",
+              "to-inverted"
+            ],
+            "default": "default"
+          },
           "backgroundImage": {
             "title": "Background image",
             "description": "Background image for the whole section",
@@ -868,6 +879,12 @@
                       "type": "string",
                       "default": "bottom"
                     },
+                    "inverted": {
+                      "type": "boolean",
+                      "title": "Inverted",
+                      "description": "Inverted color scheme for the box",
+                      "default": false
+                    },
                     "type": {
                       "const": "hero"
                     }
@@ -2064,6 +2081,12 @@
                                 "type": "string",
                                 "default": "bottom"
                               },
+                              "inverted": {
+                                "type": "boolean",
+                                "title": "Inverted",
+                                "description": "Inverted color scheme for the box",
+                                "default": false
+                              },
                               "type": {
                                 "const": "hero"
                               }
@@ -3091,8 +3114,10 @@
                       "description": "Choose the alginment of the module content",
                       "enum": [
                         "center",
+                        "below",
                         "left",
-                        "right"
+                        "right",
+                        "corner"
                       ],
                       "type": "string",
                       "default": "bottom"

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

@@ -1,4 +1,4 @@
-import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-7caa223c.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
 export type { BlogOverviewProps };

package/dist/components/blog-post/blog-post.schema.dereffed.json

@@ -315,9 +315,7 @@
             "enum": [
               "framed",
               "deko",
-              "colorful",
-              "accentTransition",
-              "boldTransition"
+              "colorful"
             ]
           },
           "backgroundColor": {
@@ -331,6 +329,19 @@
             ],
             "default": "default"
           },
+          "transition": {
+            "type": "string",
+            "title": "Style",
+            "description": "Color of background",
+            "enum": [
+              "none",
+              "to-default",
+              "to-accent",
+              "to-bold",
+              "to-inverted"
+            ],
+            "default": "default"
+          },
           "backgroundImage": {
             "title": "Background image",
             "description": "Background image for the whole section",
@@ -1144,6 +1155,12 @@
                       "type": "string",
                       "default": "bottom"
                     },
+                    "inverted": {
+                      "type": "boolean",
+                      "title": "Inverted",
+                      "description": "Inverted color scheme for the box",
+                      "default": false
+                    },
                     "type": {
                       "const": "hero"
                     }
@@ -2340,6 +2357,12 @@
                                 "type": "string",
                                 "default": "bottom"
                               },
+                              "inverted": {
+                                "type": "boolean",
+                                "title": "Inverted",
+                                "description": "Inverted color scheme for the box",
+                                "default": false
+                              },
                               "type": {
                                 "const": "hero"
                               }
@@ -3367,8 +3390,10 @@
                       "description": "Choose the alginment of the module content",
                       "enum": [
                         "center",
+                        "below",
                         "left",
-                        "right"
+                        "right",
+                        "corner"
                       ],
                       "type": "string",
                       "default": "bottom"

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

@@ -1,4 +1,4 @@
-import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
+import { BlogPostProps } from "../../BlogPostProps-7caa223c.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
 export type { BlogPostProps };

package/dist/components/header/header.css

@@ -1,8 +1,11 @@
 :root,
 [ks-theme],
 [ks-inverted] {
+  --dsa-header--height: calc(var(--dsa-logo--height) + var(--dsa-header--spacing-vertical) * 2);
   --dsa-header--spacing-vertical: var(--ks-spacing-inset-m);
   --dsa-header--spacing-horizontal: var(--ks-spacing-inset-xl);
+  --dsa-header_floating--spacing-horizontal: var(--ks-spacing-inset-l);
+  --dsa-header_open--shadow: 0 0 0 100px var(--ks-color-fg-alpha-3);
 }
 @media (min-width: 62em) {
   :root,
@@ -10,13 +13,15 @@
   [ks-inverted] {
     --dsa-header--spacing-vertical: var(--ks-spacing-stack-s);
     --dsa-header--spacing-horizontal: var(--dsa-content--horizontal-spacing);
+    --dsa-header_floating--spacing-horizontal: var(--ks-spacing-inset-m);
   }
 }
 
 .dsa-header {
   --dsa-header--max-width: var(--dsa-content--width_max);
   --dsa-header--background: var(--ks-background-color-default);
-  --dsa-header_floating--background: linear-gradient(var(--ks-color-bg), transparent);
+  --dsa-header_floating--background: var(--dsa-overlay-box--background-color);
+  --dsa-header_floating--backdrop-filter: var(--dsa-overlay-box--backdrop-filter);
   --dsa-header__logo--height: var(--dsa-logo--height);
 }
 
@@ -26,23 +31,54 @@
   width: 100%;
   display: flex;
   padding: var(--dsa-header--spacing-vertical) 0;
-  position: relative;
+  transition: height var(--ks-transition-collapse);
+  height: calc(var(--dsa-logo--height) + var(--dsa-header--spacing-vertical) * 2);
+}
+.dsa-header--overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 998;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--ks-color-fg-alpha-3);
+  opacity: 0;
+  transition: opacity var(--ks-transition-fade);
+  pointer-events: none;
+}
+.overlay-open .dsa-header--overlay {
+  opacity: 1;
+}
+.overlay-open .dsa-header {
+  height: 100vh;
 }
 .dsa-header--floating {
-  background: var(--dsa-header_floating--background, linear-gradient(var(--ks-color-bg-alpha-5), transparent));
+  top: 10px;
+  width: calc(var(--dsa-content--width_wide) + var(--dsa-header_floating--spacing-horizontal) * 2);
+  max-width: calc(100vw - var(--dsa-header--spacing-horizontal) * 2);
+  padding: var(--dsa-header--spacing-vertical) 0;
+  margin: auto;
+  left: 50%;
+  transform: translate(-50%, 0);
+  background: var(--dsa-header_floating--background, var(--dsa-overlay-box--background-color));
+  backdrop-filter: var(--dsa-header_floating--backdrop-filter, blur(10px));
   position: absolute;
+  border-radius: var(--ks-border-radius-surface);
+}
+.overlay-open .dsa-header--floating {
+  background: var(--dsa-header--background, var(--ks-background-color-default));
+  height: 95%;
 }
 .dsa-header--floating .c-nav-main__link {
   text-shadow: 0 0 10px var(--ks-color-bg-alpha-5);
 }
 .dsa-header__content {
-  padding: 0 var(--dsa-header--spacing-horizontal);
+  padding: 0 var(--dsa-header_floating--spacing-horizontal);
   max-width: var(--dsa-header--max-width);
   width: 100%;
-  margin: auto;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .dsa-header--spacer {

package/dist/components/header/index.js

@@ -1,5 +1,5 @@
 import "./header.css";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { forwardRef, createContext, useContext } from 'react';
 import { NavMain } from '../nav-main/index.js';
@@ -17,10 +17,10 @@ import '../nav-dropdown/index.js';
 import '../nav-flyout/index.js';
 import '@kickstartds/base/lib/picture';
 
-const HeaderContextDefault = forwardRef(({ logo, floating, inverted = false, flyoutInverted = false, dropdownInverted = false, navItems = [], }, ref) => (jsx("header", { 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 HeaderContextDefault = forwardRef(({ logo, floating, inverted = false, flyoutInverted = false, dropdownInverted = false, navItems = [], }, ref) => (jsxs(Fragment, { children: [jsx("header", { 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,
+                        } })] }) }), floating && jsx("div", { className: "dsa-header--overlay" })] })));
 const HeaderContext = createContext(HeaderContextDefault);
 const Header = forwardRef((props, ref) => {
     const Component = useContext(HeaderContext);

package/dist/components/headline/headline.css

@@ -1,6 +1,6 @@
 :root, [ks-inverted], [ks-theme] {
   --dsa-headline--color: var(--ks-text-color-display);
-  --dsa-headline--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-headline--font-weight: var(--ks-font-weight-bold);
   --dsa-headline--text-transform: none;
   --dsa-headline--gap: 0.25em;
   --dsa-headline--space-after_large: var(--ks-spacing-stack-l);
@@ -115,7 +115,7 @@
   margin: 0;
   max-width: var(--dsa-content--width_default);
   color: var(--dsa-headline__subheadline--color, var(--ks-text-color-primary));
-  font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-semi-bold));
+  font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-bold));
 }
 .dsa-headline--space-after-minimum {
   margin-bottom: var(--headline--space-after_minimum);

package/dist/components/hero/hero.css

@@ -14,8 +14,8 @@
   --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(--ks-color-bg-alpha-3);
-  --dsa-hero__textbox--backdrop-filter: blur(10px);
+  --dsa-hero__textbox--background-color: var(--dsa-overlay-box--background-color);
+  --dsa-hero__textbox--backdrop-filter: var(--dsa-overlay-box--backdrop-filter);
   --dsa-hero__textbox--box-shadow: none;
   --dsa-hero__textbox--border-radius: var(--ks-border-radius-card);
   --dsa-hero__textbox--max-width: calc(var(--dsa-content--width_narrow) * 1.15);
@@ -53,7 +53,7 @@
   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(--ks-color-bg-alpha-2));
+  --c-visual_box--background: var(--dsa-hero__textbox--background-color, var(--dsa-overlay-box--background-color));
   --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--padding: var(--dsa-hero__textbox--padding, var(--ks-spacing-inset-squish-xl));
@@ -88,7 +88,7 @@
     --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, blur(0px));
+    backdrop-filter: var(--dsa-hero__textbox--backdrop-filter, var(--dsa-overlay-box--backdrop-filter));
     box-shadow: var(--dsa-hero__textbox--box-shadow, var(--ks-box-shadow-card));
   }
 }
@@ -113,6 +113,10 @@
 .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 visual (min-width: 640px) {
   .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media {
     position: relative;

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

@@ -163,6 +163,12 @@
       "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

@@ -76,6 +76,12 @@
       "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-f704d270.js";
+import { HeroProps } from "../../HeroProps-aa4e6431.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,13 +8,13 @@ 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, image, overlay, textbox, className, buttons = [], ...rest }, ref) => {
+const HeroContextDefault = forwardRef(({ headline, sub, height, text, highlightText, textPosition = "center", colorNeutral, inverted, 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: "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: {
+        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, skipButton: height === "fullScreen" ? true : false, inverted: true, box: {
                     background: textbox === true ? "solid" : "transparent",
                     enabled: true,
                     vertical: textPosition === "below" || textPosition === "corner"

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "../../ImageStoryProps-03ff6d21.js";
 declare const ImageStoryContextDefault: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const ImageStoryContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const ImageStory: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -29,7 +29,7 @@ interface SettingsProps {
     seo: SeoProps;
     iconSprite?: IconSprite;
 }
-export * from "../../BlogPostProps-6b3cff22.js";
-export * from "../../BlogOverviewProps-9f207f1c.js";
-export * from "../../PageProps-aa29c554.js";
+export * from "../../BlogPostProps-7caa223c.js";
+export * from "../../BlogOverviewProps-7caa223c.js";
+export * from "../../PageProps-7caa223c.js";
 export { IconSprite, SettingsProps };

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

@@ -1,5 +1,5 @@
 .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--border-radius: var(--ks-border-radius-card);
   --dsa-nav-dropdown--box-shadow: var(--ks-box-shadow-card);
@@ -8,10 +8,12 @@
   --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--border-radius: var(--ks-border-radius-control);
   --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.35em 0.25em;
+  --dsa-nav-dropdown__label--padding: 0.45em 0.75em;
   --dsa-nav-dropdown__label_dimmed--opacity: 0.75;
 }
 .dsa-nav-dropdown[ks-inverted=true] {
@@ -49,8 +51,10 @@
   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-flyout/index.js

@@ -1,16 +1,14 @@
 import "./nav-flyout.css";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } 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, 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 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": "Hauptnavigation", ref: ref, children: 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);