@kickstartds/ds-agency-premium 1.6.71--canary.45.2208.0 → 1.6.71--canary.49.2214.0

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

@@ -3,8 +3,8 @@
  * 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-d60aba86.js";
-import { BlogTeaserProps } from "./BlogTeaserProps-d62a0a9a.js";
+import { SectionProps } from "./SectionProps-2a23ef89.js";
+import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
 import { CtaProps } from "./CtaProps-789f8508.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/BlogPostProps-c760fd2a.d.ts

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

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

package/dist/{SectionProps-d60aba86.d.ts → SectionProps-2a23ef89.d.ts}

@@ -33,7 +33,7 @@ type Width = "full" | "max" | "wide" | "default" | "narrow";
 /**
  * Style of background
  */
-type Style = "default" | "framed" | "deko";
+type Style = "default" | "framed" | "inset";
 /**
  * Color of background
  */

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

@@ -39,7 +39,7 @@
             "enum": [
               "default",
               "framed",
-              "deko"
+              "inset"
             ],
             "default": "default"
           },

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

@@ -1,4 +1,4 @@
-import { BlogOverviewProps } from "../../BlogOverviewProps-d62a0a9a.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,7 +311,7 @@
             "enum": [
               "default",
               "framed",
-              "deko"
+              "inset"
             ],
             "default": "default"
           },

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { BlogTeaserProps } from "../../BlogTeaserProps-d62a0a9a.js";
+import { BlogTeaserProps } from "../../BlogTeaserProps-f5855e93.js";
 declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/button/button.css

@@ -1,7 +1,7 @@
 .dsa-button {
   --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--border-radius: var(--ks-border-radius-pill);
   --dsa-button--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-button--text-transform: default;
   --dsa-button_small--font: var(--ks-font-interface-s);

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

@@ -1,25 +1,8 @@
 import { define } from '@kickstartds/core/lib/component';
-import 'c15t';
 import CookieConsent from './CookieConsent.client.js';
 
-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;
+const translate = (elements, state) => {
+    const translations = state.translationConfig.translations[state.translationConfig.defaultLanguage];
     // Notice
     elements.notice.title.textContent = translations.cookieBanner.title;
     elements.notice.description.textContent =
@@ -42,19 +25,7 @@ const translate = (elements, translationConfig) => {
                 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) {
@@ -86,7 +57,7 @@ class CookieConsentC15t extends CookieConsent {
             }
         };
         const unsub = store.subscribe(update);
-        translate(this.elements, initialState.translationConfig);
+        translate(this.elements, initialState);
         update(initialState);
         const acceptCustom = () => {
             const state = store.getState();

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

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

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

@@ -15,6 +15,7 @@ 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"),
@@ -28,19 +29,19 @@ class CookieConsent extends Component {
             },
         });
         const showDialog = () => {
-            elements.dialog.wrapper.showModal();
+            elements.dialog.overlay.removeAttribute("hidden");
+            elements.dialog.wrapper.removeAttribute("hidden");
+            elements.dialog.wrapper.setAttribute("aria-hidden", "false");
         };
         const closeDialog = () => {
-            elements.dialog.wrapper.close();
+            elements.dialog.overlay.setAttribute("hidden", "");
+            elements.dialog.wrapper.setAttribute("hidden", "");
+            elements.dialog.wrapper.setAttribute("aria-hidden", "true");
         };
         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") {
@@ -55,12 +56,16 @@ 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.wrapper.addEventListener("click", onBackdropClick);
+        elements.dialog.form.addEventListener("submit", onSubmit);
         window._ks.radio.on(CookieConsent.identifier + ".showNotice", (_, value) => {
             this.showNotice = value;
         });
@@ -70,7 +75,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.wrapper.removeEventListener("click", onBackdropClick);
+            elements.dialog.form.removeEventListener("submit", onSubmit);
         });
     }
     set showNotice(value) {

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

@@ -144,16 +144,20 @@
   left: 0;
 }
 
-.dsa-cookie-consent-dialogue[open] {
+.dsa-cookie-consent-dialogue {
   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;
-  padding: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   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 {
@@ -250,6 +254,14 @@
     flex-direction: row;
   }
 }
-.dsa-cookie-consent-dialogue::backdrop {
+
+.dsa-cookie-consent-overlay {
+  content: "";
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
   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("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" })] })] })] })] }));
+    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 })] }));
 });
 const CookieConsentContext = createContext(CookieConsentContextDefault);
 const CookieConsent = forwardRef((props, ref) => {

package/dist/components/features/features.css

@@ -4,6 +4,7 @@
   --dsa-feature__title--color: var(--dsa-topic--color);
   --dsa-feature__title--font: var(--ks-font-interface-m);
   --dsa-feature__title--font-family: var(--dsa-topic--font-family);
+  --dsa-feature__title--font-weight: var(--dsa-topic--font-weight);
   --dsa-feature__copy--color: var(--ks-text-color-copy);
   --dsa-feature__copy--font: var(--ks-font-copy-s);
   --dsa-feature__link--font: var(--ks-font-copy-s);
@@ -14,7 +15,7 @@
   --dsa-feature__link--text-decoration_hover: none;
   --dsa-feature__icon--color: var(--ks-text-color-primary);
   --dsa-feature_small__icon--size: calc(var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m));
-  --dsa-feature_large__icon--size-multiplier: 2.5;
+  --dsa-feature_large__icon--size-multiplier: 2;
   --dsa-feature_small--gap: var(--ks-spacing-xs);
   --dsa-feature_large--gap: var(--ks-spacing-s);
   --dsa-feature_small__icon--gap: var(--ks-spacing-xs);

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: 1px solid var(--ks-border-color-default);
+  --dsa-footer--background-color: var(--ks-background-color-accent);
+  --dsa-footer--border-top: 0;
   --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,43 +107,36 @@
       "examples": [
         [
           {
-            "label": "Active Item",
+            "label": "Beamer",
             "url": "#",
             "active": true
           },
           {
-            "label": "Navigation Item",
+            "label": "Interaktive Displays",
             "url": "#"
           },
           {
-            "label": "Dropdown",
-            "url": "#",
-            "items": [
-              {
-                "label": "Level 2 Item",
-                "url": "#"
-              },
-              {
-                "label": "Active Item",
-                "active": true,
-                "url": "#"
-              },
-              {
-                "label": "An Item with a longer Label",
-                "url": "#"
-              },
-              {
-                "label": "And One last one",
-                "url": "#"
-              }
-            ]
+            "label": "Professional Displays",
+            "url": "#"
+          },
+          {
+            "label": "LED Displays",
+            "url": "#"
+          },
+          {
+            "label": "Lösungen",
+            "url": "#"
+          },
+          {
+            "label": "Zubehör",
+            "url": "#"
           },
           {
-            "label": "One more Item",
+            "label": "Über Optoma",
             "url": "#"
           },
           {
-            "label": "Last Item",
+            "label": "Support",
             "url": "#"
           }
         ]

package/dist/components/header/header.css

@@ -32,6 +32,7 @@
   transition: height var(--ks-transition-collapse);
   height: calc(var(--dsa-logo--height) + var(--dsa-header--spacing-vertical) * 2);
   justify-content: center;
+  border-bottom: 1px solid var(--ks-border-color-default);
 }
 .dsa-header--overlay {
   position: fixed;

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

@@ -120,43 +120,36 @@
       "examples": [
         [
           {
-            "label": "Active Item",
+            "label": "Beamer",
             "url": "#",
             "active": true
           },
           {
-            "label": "Navigation Item",
+            "label": "Interaktive Displays",
             "url": "#"
           },
           {
-            "label": "Dropdown",
-            "url": "#",
-            "items": [
-              {
-                "label": "Level 2 Item",
-                "url": "#"
-              },
-              {
-                "label": "Active Item",
-                "active": true,
-                "url": "#"
-              },
-              {
-                "label": "An Item with a longer Label",
-                "url": "#"
-              },
-              {
-                "label": "And One last one",
-                "url": "#"
-              }
-            ]
+            "label": "Professional Displays",
+            "url": "#"
+          },
+          {
+            "label": "LED Displays",
+            "url": "#"
+          },
+          {
+            "label": "Lösungen",
+            "url": "#"
+          },
+          {
+            "label": "Zubehör",
+            "url": "#"
           },
           {
-            "label": "One more Item",
+            "label": "Über Optoma",
             "url": "#"
           },
           {
-            "label": "Last Item",
+            "label": "Support",
             "url": "#"
           }
         ]

package/dist/components/headline/headline.css

@@ -1,29 +1,29 @@
 :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.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-alpha-4);
+  --dsa-headline__subheadline--color: var(--ks-text-color-default);
   --dsa-headline__subheadline--font-weight: var(--ks-font-weight-bold);
-  --dsa-headline__subheadline--text-transform: uppercase;
-  --dsa-headline__subheadline--letter-spacing: 0.045em;
+  --dsa-headline__subheadline--text-transform: none;
+  --dsa-headline__subheadline--letter-spacing: none;
   --dsa-headline__subheadline--font-family: var(--ks-font-family-display);
   --dsa-headline_h1--font: var(--ks-font-display-xxl);
-  --dsa-headline_h1__subheadline--font-size: 50%;
+  --dsa-headline_h1__subheadline--font-size: 55%;
   --dsa-headline_h1--space-after_large: var(--ks-spacing-stack-l);
   --dsa-headline_h1--space-after_small: var(--ks-spacing-stack-m);
   --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__subheadline--font-size: 60%;
   --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);
-  --dsa-headline_h3__subheadline--font-size: 55%;
+  --dsa-headline_h3__subheadline--font-size: 60%;
   --dsa-headline_h3--space-after_large: var(--ks-spacing-stack-m);
   --dsa-headline_h3--space-after_small: var(--ks-spacing-stack-s);
   --dsa-headline_h3--space-after_minimum: 0;

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

@@ -1,7 +1,59 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
 import { defaultRenderFn } from "@kickstartds/core/lib/core";
-import { HeadlineProps } from "../../HeadlineProps-e1305784.js";
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * Text content of headline
+ */
+type Text = string;
+/**
+ * Subheadline content
+ */
+type Sub = string;
+/**
+ * Switch order of headline and subheadline
+ */
+type SwitchOrder = boolean;
+type SectionAlignment = "left" | "center" | "right";
+/**
+ * Level of headline to use
+ */
+type Level = "h1" | "h2" | "h3" | "h4" | "p";
+/**
+ * Style of headline to show
+ */
+type Style = "h1" | "h2" | "h3" | "h4" | "p";
+/**
+ * Whether to display space after headline
+ */
+type SpaceAfter = "minimum" | "small" | "large";
+/**
+ * Set a custom class name
+ */
+type ClassName = string;
+/**
+ * Set a custom id attribute
+ */
+type ID = string;
+/**
+ * Component used for headlines
+ */
+interface HeadlineProps {
+    text: Text;
+    sub?: Sub;
+    switchOrder?: SwitchOrder;
+    align?: SectionAlignment;
+    level: Level;
+    style?: Style;
+    spaceAfter?: SpaceAfter;
+    className?: ClassName;
+    id?: ID;
+}
 interface RenderFunctions {
     renderContent?: typeof defaultRenderFn;
     renderSubheadline?: typeof defaultRenderFn;

package/dist/components/hero/hero.css

@@ -39,12 +39,12 @@
   );
   --dsa-hero_left__overlay--background: linear-gradient(
     90deg,
-    var(--ks-color-bg-alpha-1) var(--dsa-hero__textbox--max-width),
-    transparent
+    var(--ks-color-bg-alpha-3),
+    transparent var(--dsa-hero__textbox--max-width)
   );
   --dsa-hero_right__overlay--background: linear-gradient(
     270deg,
-    var(--ks-color-bg-alpha-1) var(--dsa-hero__textbox--max-width),
+    var(--ks-color-bg-alpha-3) var(--dsa-hero__textbox--max-width),
     transparent
   );
   --dsa-hero_offset__textbox--max-width: var(--dsa-content--width_default);
@@ -77,7 +77,7 @@
   :root .dsa-hero,
   [ks-inverted=true] .dsa-hero,
   [ks-inverted=false] .dsa-hero {
-    --dsa-hero--min-height: 36rem;
+    --dsa-hero--min-height: 46rem;
     --dsa-hero--min-height_small: 20rem;
     --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
   }

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

@@ -30,7 +30,7 @@ interface SettingsProps {
     iconSprite?: IconSprite;
 }
 export * from "../../BlogPostProps-c760fd2a.js";
-export * from "../../BlogOverviewProps-d62a0a9a.js";
+export * from "../../BlogOverviewProps-9f207f1c.js";
 export * from "../../PageProps-aa29c554.js";
 export { IconSprite, SettingsProps };
 export * from "../../EventDetailProps-42a7eebe.js";

package/dist/components/mosaic/index.js

@@ -24,6 +24,7 @@ const MosaicContextDefault = forwardRef(({ layout, largeHeadlines, tile, ...rest
                     url: tile?.button?.url,
                     label: tile?.button?.label,
                     icon: tile?.button?.icon,
+                    variant: "primary",
                 },
             }),
         }, image: {

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

@@ -1,21 +1,21 @@
 .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-m) var(--ks-spacing-m) var(--ks-spacing-m) var(--ks-spacing-m);
   --dsa-nav-dropdown--background: var(--ks-background-color-default);
-  --dsa-nav-dropdown--border-radius: var(--ks-border-radius-card);
+  --dsa-nav-dropdown--border-radius: calc(var(--ks-border-radius-card) * 1);
   --dsa-nav-dropdown--box-shadow: var(--ks-box-shadow-card);
   --dsa-nav-dropdown--border: 1px solid var(--ks-border-color-card);
   --dsa-nav-dropdown--min-width: 14em;
   --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--background-color_hover: transparent;
+  --dsa-nav-dropdown__label--background-color_active: transparent;
   --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.45em 0.75em;
+  --dsa-nav-dropdown__label--padding: 0.45em 0em;
   --dsa-nav-dropdown__label_dimmed--opacity: 1;
 }
 .dsa-nav-dropdown[ks-inverted=true] {