@kickstartds/ds-agency-premium 1.6.71--canary.48.2202.0 → 1.6.71--canary.45.2205.0

package/dist/{BlogOverviewProps-4e3c6fe0.d.ts → BlogOverviewProps-9f207f1c.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-4e3c6fe0.js";
+import { SectionProps } from "./SectionProps-d60aba86.js";
 import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
 import { CtaProps } from "./CtaProps-789f8508.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";

package/dist/{BlogPostProps-4e3c6fe0.d.ts → BlogPostProps-6b3cff22.d.ts}

@@ -5,7 +5,7 @@
  */
 import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
 import { BlogAsideProps } from "./BlogAsideProps-c760fd2a.js";
-import { SectionProps } from "./SectionProps-4e3c6fe0.js";
+import { SectionProps } from "./SectionProps-d60aba86.js";
 import { CtaProps } from "./CtaProps-789f8508.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/{PageProps-4e3c6fe0.d.ts → PageProps-aa29c554.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-4e3c6fe0.js";
+import { SectionProps } from "./SectionProps-d60aba86.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Collection of sections (with their contents) to render on the page

package/dist/{SectionProps-4e3c6fe0.d.ts → SectionProps-d60aba86.d.ts}

@@ -13,7 +13,7 @@ import { FeaturesProps } from "./FeaturesProps-a9041d97.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-fec6b267.js";
 import { HtmlProps } from "./HtmlProps-9d091769.js";
-import { ImageStoryProps } from "./ImageStoryProps-4e2b2ecf.js";
+import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";
@@ -33,7 +33,7 @@ type Width = "full" | "max" | "wide" | "default" | "narrow";
 /**
  * Style of background
  */
-type Style = "default" | "framed" | "shine-left" | "shine-right" | "carbon" | "stripe";
+type Style = "default" | "framed" | "deko";
 /**
  * Color of background
  */

package/dist/SplitEvenProps-789f8508.d.ts

@@ -10,7 +10,7 @@ import { FeaturesProps } from "./FeaturesProps-a9041d97.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-fec6b267.js";
 import { HtmlProps } from "./HtmlProps-9d091769.js";
-import { ImageStoryProps } from "./ImageStoryProps-4e2b2ecf.js";
+import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

package/dist/SplitWeightedProps-789f8508.d.ts

@@ -10,7 +10,7 @@ import { FeaturesProps } from "./FeaturesProps-a9041d97.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-fec6b267.js";
 import { HtmlProps } from "./HtmlProps-9d091769.js";
-import { ImageStoryProps } from "./ImageStoryProps-4e2b2ecf.js";
+import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

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

@@ -39,10 +39,7 @@
             "enum": [
               "default",
               "framed",
-              "shine-left",
-              "shine-right",
-              "carbon",
-              "stripe"
+              "deko"
             ],
             "default": "default"
           },

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

@@ -1,4 +1,4 @@
-import { BlogOverviewProps } from "../../BlogOverviewProps-4e3c6fe0.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.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

@@ -311,10 +311,7 @@
             "enum": [
               "default",
               "framed",
-              "shine-left",
-              "shine-right",
-              "carbon",
-              "stripe"
+              "deko"
             ],
             "default": "default"
           },

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

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

package/dist/components/business-card/business-card.css

@@ -72,7 +72,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: var(--dsa-business-card--gap, var(--ks-spacing-stack-l));
-  flex-grow: 6;
+  flex-grow: 1;
 }
 @container business-card (min-width: 640px) {
   .dsa-business-card__content {
@@ -87,16 +87,6 @@
 .dsa-business-card__location {
   margin: 0;
 }
-.dsa-business-card__location p {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-.dsa-business-card__location p:first-child {
-  margin-top: 0;
-}
-.dsa-business-card__location p:last-child {
-  margin-bottom: 0;
-}
 .dsa-business-card__image {
   flex-grow: 1;
 }

package/dist/components/button/button.css

@@ -1,8 +1,8 @@
 .dsa-button {
-  --dsa-button--padding: 0.65em 1.5em;
+  --dsa-button--padding: 0.75em 1.5em;
   --dsa-button--border-width: var(--ks-border-width-default);
   --dsa-button--border-radius: var(--ks-border-radius-control);
-  --dsa-button--font-weight: var(--ks-font-weight-regular);
+  --dsa-button--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-button--text-transform: default;
   --dsa-button_small--font: var(--ks-font-interface-s);
   --dsa-button_medium--font: var(--ks-font-interface-m);

package/dist/components/cookie-consent/C15t.client.js

@@ -1,8 +1,25 @@
 import { define } from '@kickstartds/core/lib/component';
+import 'c15t';
 import CookieConsent from './CookieConsent.client.js';
 
-const translate = (elements, state) => {
-    const translations = state.translationConfig.translations[state.translationConfig.defaultLanguage];
+const customTranslations = {
+    de: {
+        accept: "Akzeptieren",
+        reject: "Ablehnen",
+        required: "Immer aktiv",
+        settings: "Cookies verwalten",
+    },
+    en: {
+        accept: "Accept",
+        reject: "Reject",
+        required: "Always Active",
+        settings: "Cookie Preferences",
+    },
+};
+const translate = (elements, translationConfig) => {
+    const defaultLanguage = translationConfig.defaultLanguage;
+    const translations = translationConfig.translations[defaultLanguage];
+    const customTranslation = customTranslations[defaultLanguage] || customTranslations.en;
     // Notice
     elements.notice.title.textContent = translations.cookieBanner.title;
     elements.notice.description.textContent =
@@ -25,7 +42,19 @@ const translate = (elements, state) => {
                 translation.title;
             option.querySelector(".dsa-cookie-consent-dialogue__option-description").textContent = translation.description;
         }
+        const requiredLabel = option.querySelector(".dsa-cookie-consent-dialogue__label");
+        if (requiredLabel)
+            requiredLabel.textContent = customTranslation.required;
+    }
+    for (const element of elements.dialog.form.elements) {
+        if (element.type === "radio") {
+            element.nextElementSibling.nextElementSibling.textContent =
+                customTranslation[element.value];
+        }
     }
+    // settings
+    elements.settings.button.firstElementChild.textContent =
+        customTranslation.settings;
 };
 class CookieConsentC15t extends CookieConsent {
     constructor(element) {
@@ -57,7 +86,7 @@ class CookieConsentC15t extends CookieConsent {
             }
         };
         const unsub = store.subscribe(update);
-        translate(this.elements, initialState);
+        translate(this.elements, initialState.translationConfig);
         update(initialState);
         const acceptCustom = () => {
             const state = store.getState();

package/dist/components/cookie-consent/CookieConsent.client.d.ts

@@ -12,7 +12,6 @@ declare class CookieConsent {
         };
         dialog: {
             wrapper: any;
-            overlay: any;
             title: any;
             description: any;
             closeBtn: any;

package/dist/components/cookie-consent/CookieConsent.client.js

@@ -15,7 +15,6 @@ class CookieConsent extends Component {
             },
             dialog: {
                 wrapper: $(".dsa-cookie-consent-dialogue"),
-                overlay: $(".dsa-cookie-consent-overlay"),
                 title: $(".dsa-cookie-consent-dialogue__title .dsa-headline__inner"),
                 description: $(".dsa-cookie-consent-dialogue__description"),
                 closeBtn: $(".dsa-cookie-consent-dialogue__close"),
@@ -29,19 +28,19 @@ class CookieConsent extends Component {
             },
         });
         const showDialog = () => {
-            elements.dialog.overlay.removeAttribute("hidden");
-            elements.dialog.wrapper.removeAttribute("hidden");
-            elements.dialog.wrapper.setAttribute("aria-hidden", "false");
+            elements.dialog.wrapper.showModal();
         };
         const closeDialog = () => {
-            elements.dialog.overlay.setAttribute("hidden", "");
-            elements.dialog.wrapper.setAttribute("hidden", "");
-            elements.dialog.wrapper.setAttribute("aria-hidden", "true");
+            elements.dialog.wrapper.close();
         };
         const closeDialogAndReset = () => {
             closeDialog();
             elements.dialog.form.reset();
         };
+        const onBackdropClick = (event) => {
+            if (event.target === elements.dialog.wrapper)
+                closeDialogAndReset();
+        };
         const activateAll = () => {
             for (const element of elements.dialog.form.elements) {
                 if (element.value === "accept") {
@@ -56,16 +55,12 @@ class CookieConsent extends Component {
                 }
             }
         };
-        const onSubmit = (event) => {
-            event.preventDefault();
-            closeDialog();
-        };
         elements.notice.customizeBtn.addEventListener("click", showDialog);
         elements.settings.button.addEventListener("click", showDialog);
         elements.dialog.closeBtn.addEventListener("click", closeDialogAndReset);
         elements.dialog.activateAllBtn.addEventListener("click", activateAll);
         elements.dialog.deactivateAllBtn.addEventListener("click", deactivateAll);
-        elements.dialog.form.addEventListener("submit", onSubmit);
+        elements.dialog.wrapper.addEventListener("click", onBackdropClick);
         window._ks.radio.on(CookieConsent.identifier + ".showNotice", (_, value) => {
             this.showNotice = value;
         });
@@ -75,7 +70,7 @@ class CookieConsent extends Component {
             elements.dialog.closeBtn.removeEventListener("click", closeDialogAndReset);
             elements.dialog.activateAllBtn.removeEventListener("click", activateAll);
             elements.dialog.deactivateAllBtn.removeEventListener("click", deactivateAll);
-            elements.dialog.form.removeEventListener("submit", onSubmit);
+            elements.dialog.wrapper.removeEventListener("click", onBackdropClick);
         });
     }
     set showNotice(value) {

package/dist/components/cookie-consent/cookie-consent.css

@@ -144,20 +144,16 @@
   left: 0;
 }
 
-.dsa-cookie-consent-dialogue {
+.dsa-cookie-consent-dialogue[open] {
   border-radius: var(--dsa-cookie-consent-dialogue--border-radius, var(--ks-border-radius-card));
   border: var(--dsa-cookie-consent-dialogue--border, var(--ks-border-color-interface) solid var(--ks-border-width-default));
   box-shadow: var(--dsa-cookie-consent-dialogue--box-shadow, var(--ks-box-shadow-card));
   background-color: var(--dsa-cookie-consent-dialogue--background-color, var(--ks-background-color-default));
   display: flex;
   flex-direction: column;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  padding: 0;
   width: calc(100% - var(--dsa-cookie-consent-dialogue--spacing-horizontal, var(--ks-spacing-inset-xs)) * 2);
   max-width: var(--dsa-cookie-consent-dialogue--max-width, var(--dsa-tile--width_largest));
-  z-index: 1000;
   max-height: calc(var(--dsa-cookie-consent-dialogue--max-height, 100%) - var(--dsa-cookie-consent-dialogue--spacing-vertical, var(--ks-spacing-inset-xs)) * 2);
 }
 .dsa-cookie-consent-dialogue__header {
@@ -254,14 +250,6 @@
     flex-direction: row;
   }
 }
-
-.dsa-cookie-consent-overlay {
-  content: "";
-  position: absolute;
-  top: 0%;
-  left: 0%;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
+.dsa-cookie-consent-dialogue::backdrop {
   background-color: var(--dsa-cookie-consent-overlay--background-color, var(--dsa-overlay--background-color));
 }

package/dist/components/cookie-consent/index.js

@@ -14,7 +14,7 @@ import '@kickstartds/base/lib/button';
 import '@kickstartds/core/lib/component';
 
 const CookieConsentContextDefault = forwardRef(({ notice, revisitButton, dialogue, component = "dsa.cookie-consent" }, ref) => {
-    return (jsxs("div", { className: "dsa-cookie-consent", "ks-component": component, ref: ref, children: [jsxs("div", { className: classnames(`dsa-cookie-consent-notice dsa-cookie-consent-notice--${notice?.displayMode}`), hidden: true, children: [jsx(Headline, { spaceAfter: "minimum", text: notice?.title, level: "h2", style: "h3", className: "dsa-cookie-consent-notice__title" }), jsx(RichText, { text: notice?.description, className: "dsa-cookie-consent-notice__description" }), jsxs("div", { className: "dsa-cookie-consent-notice__buttons", children: [jsx(Button, { size: "small", label: notice?.customizeButton?.label, variant: notice?.customizeButton?.variant, className: "dsa-cookie-consent-notice__button--customize" }), jsx(Button, { size: "small", label: notice?.rejectButton?.label, variant: notice?.decisionButtonVariant, className: "dsa-cookie-consent-notice__button--reject" }), jsx(Button, { size: "small", label: notice?.acceptButton?.label, variant: notice?.decisionButtonVariant, className: "dsa-cookie-consent-notice__button--accept" })] })] }), jsx(Button, { className: "dsa-cookie-consent-revisit", size: "small", variant: "primary", icon: "star", label: revisitButton?.label || "Cookie Preferences", hidden: true }), jsxs("div", { className: "dsa-cookie-consent-dialogue", hidden: true, "aria-hidden": true, children: [jsxs("div", { className: "dsa-cookie-consent-dialogue__header", children: [jsx(Headline, { spaceAfter: "minimum", text: dialogue?.title, level: "h2", style: "h3", className: "dsa-cookie-consent-dialogue__title" }), jsx(Button, { "aria-label": "Close Cookie Consent Dialogue", className: "dsa-cookie-consent-dialogue__close", icon: "close", label: "" })] }), jsxs("form", { className: "dsa-cookie-consent-dialogue__form", children: [jsxs("div", { className: "dsa-cookie-consent-dialogue__content", children: [jsx(RichText, { className: "dsa-cookie-consent-dialogue__description", text: dialogue?.description }), jsxs("div", { className: "dsa-cookie-consent-dialogue__options", children: [dialogue?.required?.map((option, index) => (jsxs("div", { className: "dsa-cookie-consent-dialogue__option", "data-consent-type": option.key, children: [jsx(Headline, { spaceAfter: "minimum", text: option.name, level: "h3", style: "h4" }), jsx(Markdown, { className: "dsa-cookie-consent-dialogue__option-description", children: option.description }), jsx("span", { className: "dsa-cookie-consent-dialogue__label", children: dialogue?.alwaysActiveLabel || "Always Active" })] }, index))), dialogue?.options?.map((option, index) => (jsxs("div", { className: "dsa-cookie-consent-dialogue__option", "data-consent-type": option.key, children: [jsx(Headline, { spaceAfter: "minimum", text: option.name, level: "h3", style: "h4" }), jsx(Markdown, { className: "dsa-cookie-consent-dialogue__option-description", children: option.description }), jsxs("div", { className: "dsa-cookie-consent-dialogue__toggle", children: [jsx(Radio, { name: option.key, label: dialogue?.toggleLabels?.accept || "Accept", value: "accept" }), jsx(Radio, { name: option.key, label: dialogue?.toggleLabels?.reject || "Reject", value: "reject" })] })] }, index)))] })] }), jsxs("div", { className: "dsa-cookie-consent-dialogue__buttons", children: [jsx(Button, { type: "button", size: "small", variant: dialogue?.decisionButtonVariant, label: dialogue?.buttons.acceptLabel || "Accept All", className: "dsa-cookie-consent-dialogue__button--activate-all" }), jsx(Button, { type: "button", size: "small", variant: dialogue?.decisionButtonVariant, label: dialogue?.buttons.rejectLabel || "Reject All", className: "dsa-cookie-consent-dialogue__button--deactivate-all" }), jsx(Button, { type: "submit", size: "small", variant: "primary", label: dialogue?.buttons.savePreferencesLabel || "Save Preferences", className: "dsa-cookie-consent-dialogue__button--save" })] })] })] }), jsx("div", { className: "dsa-cookie-consent-overlay", hidden: true })] }));
+    return (jsxs("div", { className: "dsa-cookie-consent", "ks-component": component, ref: ref, children: [jsxs("div", { className: classnames(`dsa-cookie-consent-notice dsa-cookie-consent-notice--${notice?.displayMode}`), hidden: true, children: [jsx(Headline, { spaceAfter: "minimum", text: notice?.title, level: "h2", style: "h3", className: "dsa-cookie-consent-notice__title" }), jsx(RichText, { text: notice?.description, className: "dsa-cookie-consent-notice__description" }), jsxs("div", { className: "dsa-cookie-consent-notice__buttons", children: [jsx(Button, { size: "small", label: notice?.customizeButton?.label, variant: notice?.customizeButton?.variant, className: "dsa-cookie-consent-notice__button--customize" }), jsx(Button, { size: "small", label: notice?.rejectButton?.label, variant: notice?.decisionButtonVariant, className: "dsa-cookie-consent-notice__button--reject" }), jsx(Button, { size: "small", label: notice?.acceptButton?.label, variant: notice?.decisionButtonVariant, className: "dsa-cookie-consent-notice__button--accept" })] })] }), jsx(Button, { className: "dsa-cookie-consent-revisit", size: "small", variant: "primary", icon: "star", label: revisitButton?.label || "Cookie Preferences", hidden: true }), jsxs("dialog", { className: "dsa-cookie-consent-dialogue", children: [jsxs("div", { className: "dsa-cookie-consent-dialogue__header", children: [jsx(Headline, { spaceAfter: "minimum", text: dialogue?.title, level: "h2", style: "h3", className: "dsa-cookie-consent-dialogue__title" }), jsx(Button, { "aria-label": "Close Cookie Consent Dialogue", className: "dsa-cookie-consent-dialogue__close", icon: "close", label: "", autoFocus: true })] }), jsxs("form", { className: "dsa-cookie-consent-dialogue__form", method: "dialog", children: [jsxs("div", { className: "dsa-cookie-consent-dialogue__content", children: [jsx(RichText, { className: "dsa-cookie-consent-dialogue__description", text: dialogue?.description }), jsxs("div", { className: "dsa-cookie-consent-dialogue__options", children: [dialogue?.required?.map((option, index) => (jsxs("div", { className: "dsa-cookie-consent-dialogue__option", "data-consent-type": option.key, children: [jsx(Headline, { spaceAfter: "minimum", text: option.name, level: "h3", style: "h4" }), jsx(Markdown, { className: "dsa-cookie-consent-dialogue__option-description", children: option.description }), jsx("span", { className: "dsa-cookie-consent-dialogue__label", children: dialogue?.alwaysActiveLabel || "Always Active" })] }, index))), dialogue?.options?.map((option, index) => (jsxs("div", { className: "dsa-cookie-consent-dialogue__option", "data-consent-type": option.key, children: [jsx(Headline, { spaceAfter: "minimum", text: option.name, level: "h3", style: "h4" }), jsx(Markdown, { className: "dsa-cookie-consent-dialogue__option-description", children: option.description }), jsxs("div", { className: "dsa-cookie-consent-dialogue__toggle", children: [jsx(Radio, { name: option.key, label: dialogue?.toggleLabels?.accept || "Accept", value: "accept" }), jsx(Radio, { name: option.key, label: dialogue?.toggleLabels?.reject || "Reject", value: "reject" })] })] }, index)))] })] }), jsxs("div", { className: "dsa-cookie-consent-dialogue__buttons", children: [jsx(Button, { type: "button", size: "small", variant: dialogue?.decisionButtonVariant, label: dialogue?.buttons.acceptLabel || "Accept All", className: "dsa-cookie-consent-dialogue__button--activate-all" }), jsx(Button, { type: "button", size: "small", variant: dialogue?.decisionButtonVariant, label: dialogue?.buttons.rejectLabel || "Reject All", className: "dsa-cookie-consent-dialogue__button--deactivate-all" }), jsx(Button, { type: "submit", size: "small", variant: "primary", label: dialogue?.buttons.savePreferencesLabel || "Save Preferences", className: "dsa-cookie-consent-dialogue__button--save" })] })] })] })] }));
 });
 const CookieConsentContext = createContext(CookieConsentContextDefault);
 const CookieConsent = forwardRef((props, ref) => {

package/dist/components/footer/footer.css

@@ -1,6 +1,6 @@
 .dsa-footer {
   --dsa-footer--background-color: var(--ks-background-color-default);
-  --dsa-footer--border-top: none;
+  --dsa-footer--border-top: 1px solid var(--ks-border-color-default);
   --dsa-footer--max-width: var(--dsa-content--width_wide);
   --dsa-footer--gap-vertical: var(--ks-spacing-stack-m);
   --dsa-footer__byline--font: var(--ks-font-copy-xs);

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

@@ -107,51 +107,43 @@
       "examples": [
         [
           {
-            "label": "Fahrzeugsuche",
+            "label": "Active Item",
             "url": "#",
             "active": true
           },
           {
-            "label": "Marken",
+            "label": "Navigation Item",
+            "url": "#"
+          },
+          {
+            "label": "Dropdown",
             "url": "#",
             "items": [
               {
-                "label": "Nissan",
+                "label": "Level 2 Item",
                 "url": "#"
               },
               {
-                "label": "Kia",
+                "label": "Active Item",
                 "active": true,
                 "url": "#"
               },
               {
-                "label": "Maserati",
+                "label": "An Item with a longer Label",
                 "url": "#"
               },
               {
-                "label": "Corvette",
+                "label": "And One last one",
                 "url": "#"
               }
             ]
           },
           {
-            "label": "Standorte",
-            "url": "#"
-          },
-          {
-            "label": "Bonusprogramm",
-            "url": "#"
-          },
-          {
-            "label": "News",
-            "url": "#"
-          },
-          {
-            "label": "Jobs",
+            "label": "One more Item",
             "url": "#"
           },
           {
-            "label": "Kontakt",
+            "label": "Last Item",
             "url": "#"
           }
         ]

package/dist/components/header/header.css

@@ -18,8 +18,8 @@
 .dsa-header {
   --dsa-header--max-width: var(--dsa-content--width_wide);
   --dsa-header--background: var(--ks-background-color-default);
-  --dsa-header_floating--background: linear-gradient(0deg, transparent, black);
-  --dsa-header_floating--backdrop-filter: none;
+  --dsa-header_floating--background: var(--dsa-overlay-box_opaque--background-color);
+  --dsa-header_floating--backdrop-filter: var(--dsa-overlay-box_opaque--backdrop-filter);
   --dsa-header__logo--height: var(--dsa-logo--height);
 }
 
@@ -52,18 +52,16 @@
   height: 100vh;
 }
 .dsa-header--floating {
-  width: 100%;
-  max-width: 100%;
+  width: calc(100vw - var(--dsa-header_floating--spacing-horizontal) * 2);
+  max-width: calc(var(--dsa-header--max-width) + var(--dsa-header_floating--spacing-horizontal) * 2);
+  top: 10px;
   padding: var(--dsa-header--spacing-vertical) 0;
   left: 50%;
   transform: translate(-50%, 0);
   background: var(--dsa-header_floating--background, var(--dsa-overlay-box_opaque--background-color));
   backdrop-filter: var(--dsa-header_floating--backdrop-filter, blur(10px));
   position: absolute;
-  border-radius: 0;
-}
-.dsa-header--floating .dsa-header__content {
-  width: calc(100vw - var(--dsa-header_floating--spacing-horizontal) * 2);
+  border-radius: var(--ks-border-radius-surface);
 }
 .overlay-open .dsa-header--floating {
   background: var(--dsa-header--background, var(--ks-background-color-default));

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

@@ -120,51 +120,43 @@
       "examples": [
         [
           {
-            "label": "Fahrzeugsuche",
+            "label": "Active Item",
             "url": "#",
             "active": true
           },
           {
-            "label": "Marken",
+            "label": "Navigation Item",
+            "url": "#"
+          },
+          {
+            "label": "Dropdown",
             "url": "#",
             "items": [
               {
-                "label": "Nissan",
+                "label": "Level 2 Item",
                 "url": "#"
               },
               {
-                "label": "Kia",
+                "label": "Active Item",
                 "active": true,
                 "url": "#"
               },
               {
-                "label": "Maserati",
+                "label": "An Item with a longer Label",
                 "url": "#"
               },
               {
-                "label": "Corvette",
+                "label": "And One last one",
                 "url": "#"
               }
             ]
           },
           {
-            "label": "Standorte",
-            "url": "#"
-          },
-          {
-            "label": "Bonusprogramm",
-            "url": "#"
-          },
-          {
-            "label": "News",
-            "url": "#"
-          },
-          {
-            "label": "Jobs",
+            "label": "One more Item",
             "url": "#"
           },
           {
-            "label": "Kontakt",
+            "label": "Last Item",
             "url": "#"
           }
         ]

package/dist/components/headline/headline.css

@@ -2,12 +2,12 @@
   --dsa-headline--color: var(--ks-text-color-display);
   --dsa-headline--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-headline--text-transform: none;
-  --dsa-headline--gap: 0.5em;
+  --dsa-headline--gap: 0.35em;
   --dsa-headline--space-after_large: var(--ks-spacing-stack-l);
   --dsa-headline--space-after_small: var(--ks-spacing-stack-m);
   --dsa-headline--space-after_minimum: var(--ks-spacing-stack-s);
   --dsa-headline--higlight-background: var(--dsa-typo--highlight);
-  --dsa-headline__subheadline--color: var(--ks-color-fg-to-bg-4);
+  --dsa-headline__subheadline--color: var(--ks-color-fg-alpha-4);
   --dsa-headline__subheadline--font-weight: var(--ks-font-weight-bold);
   --dsa-headline__subheadline--text-transform: uppercase;
   --dsa-headline__subheadline--letter-spacing: 0.045em;
@@ -19,7 +19,7 @@
   --dsa-headline_h1--space-after_minimum: var(--ks-spacing-stack-s);
   --dsa-headline_h2--font: var(--ks-font-display-xl);
   --dsa-headline_h2__subheadline--font-size: 50%;
-  --dsa-headline_h2--space-after_large: var(--ks-spacing-stack-xl);
+  --dsa-headline_h2--space-after_large: var(--ks-spacing-stack-l);
   --dsa-headline_h2--space-after_small: var(--ks-spacing-stack-m);
   --dsa-headline_h2--space-after_minimum: 0;
   --dsa-headline_h3--font: var(--ks-font-display-l);
@@ -64,48 +64,6 @@
   --headline--space-after_large: var(--dsa-headline_h1--space-after_large);
   font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
 }
-.dsa-headline--h1 .dsa-headline__headline:not(:last-child),
-.dsa-headline--h1 .dsa-headline__headline:only-child {
-  display: flex;
-  flex-direction: column;
-}
-.dsa-headline--h1 .dsa-headline__headline:not(:last-child):after,
-.dsa-headline--h1 .dsa-headline__headline:only-child:after {
-  content: "";
-  font-size: inherit;
-  background-color: var(--ks-color-primary);
-  height: 3px;
-  width: 17%;
-  min-width: 5rem;
-  max-width: 10rem;
-  margin-top: var(--dsa-headline--gap);
-}
-.dsa-headline--h1 .dsa-headline__headline:not(:first-child) {
-  display: flex;
-  flex-direction: column;
-}
-.dsa-headline--h1 .dsa-headline__headline:not(:first-child):before {
-  content: "";
-  font-size: inherit;
-  background-color: var(--ks-color-primary);
-  height: 3px;
-  width: 30%;
-  min-width: 3rem;
-  max-width: 4rem;
-  margin-bottom: var(--dsa-headline--gap);
-}
-.dsa-headline--h1.dsa-headline--align-center .dsa-headline__headline,
-.dsa-headline--h1.dsa-headline--align-center .dsa-headline__subheadline {
-  align-items: center;
-}
-.dsa-headline--h1.dsa-headline--align-left .dsa-headline__headline,
-.dsa-headline--h1.dsa-headline--align-left .dsa-headline__subheadline {
-  align-items: flex-start;
-}
-.dsa-headline--h1.dsa-headline--align-right .dsa-headline__headline,
-.dsa-headline--h1.dsa-headline--align-right .dsa-headline__subheadline {
-  align-items: flex-end;
-}
 .dsa-headline--h2 {
   --subheadline--font-size: var(--dsa-headline_h2__subheadline--font-size, 50%);
   --headline--space-after_minimum: var(--dsa-headline_h2--space-after_minimum);

package/dist/components/hero/hero.css

@@ -37,10 +37,10 @@
     var(--ks-background-color-default) 15%,
     transparent 50%
   );
-  --dsa-hero_left__overlay--background: radial-gradient(
-    100% 200% at 0% 50%,
-    var(--ks-color-fg-inverted-alpha-4) 25%,
-    var(--ks-color-bg-alpha-9) 50%
+  --dsa-hero_left__overlay--background: linear-gradient(
+    90deg,
+    var(--ks-color-bg-alpha-1) var(--dsa-hero__textbox--max-width),
+    transparent
   );
   --dsa-hero_right__overlay--background: linear-gradient(
     270deg,
@@ -130,7 +130,7 @@
   }
   .c-visual.dsa-hero.dsa-hero--content-offset {
     --c-visual_overlay--background: var(
-      --dsa-hero_offset__overlay--background,
+      --dsa-hero--offset__overlay--background,
       linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
     );
   }
@@ -161,18 +161,6 @@
 .c-visual.dsa-hero .dsa-headline .dsa-headline__subheadline {
   color: var(--dsa-hero__subheadline--color, var(--dsa-headline__subheadline--color, var(--ks-text-color-primary)));
 }
-.c-visual.dsa-hero--content-corner {
-  --c-visual_overlay--background: var(
-    --dsa-hero_corner__overlay--background,
-    linear-gradient(40deg, var(--ks-background-color-default) 15%, transparent 50%)
-  );
-}
-.c-visual.dsa-hero--content-left {
-  --c-visual_overlay--background: var(
-    --dsa-hero_left__overlay--background,
-    linear-gradient(40deg, var(--ks-background-color-default) 15%, transparent 50%)
-  );
-}
 .c-visual.dsa-hero .c-button-group {
   --c-button-group--vertical-gutter: var(--ks-spacing-stack-m);
   --c-button-group--horizontal-gutter: var(--ks-spacing-inline-m);

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

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