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

package/dist/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-2a23ef89.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-c760fd2a.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-2a23ef89.js";
+import { SectionProps } from "./SectionProps-d60aba86.js";
 import { CtaProps } from "./CtaProps-789f8508.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/HeadlineProps-e1305784.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 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;
+}
+export { Text, Sub, SwitchOrder, SectionAlignment, Level, Style, SpaceAfter, ClassName, ID, HeadlineProps };

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-2a23ef89.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/SearchBarProps-26263244.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+/**
+ * Placeholder text for the search input field.
+ */
+type Placeholder = string;
+interface SearchBarProps {
+    placeholder?: Placeholder;
+    /**
+     * Text displayed on the search button.
+     */
+    buttonText?: string;
+    /**
+     * Additional information or instructions related to the search functionality.
+     */
+    hint?: string;
+    /**
+     * Text to display when offering alternative results.
+     */
+    alternativeText?: string;
+    /**
+     * The alternative result to display when offering suggestions.
+     */
+    alternativeResult?: string;
+}
+export { Placeholder, SearchBarProps };

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

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

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

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

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

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

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

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

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-pill);
+  --dsa-button--border-radius: var(--ks-border-radius-control);
   --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,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/features/features.css

@@ -4,7 +4,6 @@
   --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);
@@ -15,7 +14,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;
+  --dsa-feature_large__icon--size-multiplier: 2.5;
   --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-accent);
-  --dsa-footer--border-top: 0;
+  --dsa-footer--background-color: var(--ks-background-color-default);
+  --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,36 +107,43 @@
       "examples": [
         [
           {
-            "label": "Beamer",
+            "label": "Active Item",
             "url": "#",
             "active": true
           },
           {
-            "label": "Interaktive Displays",
+            "label": "Navigation Item",
             "url": "#"
           },
           {
-            "label": "Professional Displays",
-            "url": "#"
-          },
-          {
-            "label": "LED Displays",
-            "url": "#"
-          },
-          {
-            "label": "Lösungen",
-            "url": "#"
-          },
-          {
-            "label": "Zubehör",
-            "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": "Über Optoma",
+            "label": "One more Item",
             "url": "#"
           },
           {
-            "label": "Support",
+            "label": "Last Item",
             "url": "#"
           }
         ]

package/dist/components/header/header.css

@@ -32,7 +32,6 @@
   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,36 +120,43 @@
       "examples": [
         [
           {
-            "label": "Beamer",
+            "label": "Active Item",
             "url": "#",
             "active": true
           },
           {
-            "label": "Interaktive Displays",
+            "label": "Navigation Item",
             "url": "#"
           },
           {
-            "label": "Professional Displays",
-            "url": "#"
-          },
-          {
-            "label": "LED Displays",
-            "url": "#"
-          },
-          {
-            "label": "Lösungen",
-            "url": "#"
-          },
-          {
-            "label": "Zubehör",
-            "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": "Über Optoma",
+            "label": "One more Item",
             "url": "#"
           },
           {
-            "label": "Support",
+            "label": "Last Item",
             "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-bold);
+  --dsa-headline--font-weight: var(--ks-font-weight-semi-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-text-color-default);
+  --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: none;
-  --dsa-headline__subheadline--letter-spacing: none;
+  --dsa-headline__subheadline--text-transform: uppercase;
+  --dsa-headline__subheadline--letter-spacing: 0.045em;
   --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: 55%;
+  --dsa-headline_h1__subheadline--font-size: 50%;
   --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: 60%;
+  --dsa-headline_h2__subheadline--font-size: 50%;
   --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: 60%;
+  --dsa-headline_h3__subheadline--font-size: 55%;
   --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,59 +1,7 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
 import { defaultRenderFn } from "@kickstartds/core/lib/core";
-/* 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;
-}
+import { HeadlineProps } from "../../HeadlineProps-e1305784.js";
 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-3),
-    transparent var(--dsa-hero__textbox--max-width)
+    var(--ks-color-bg-alpha-1) var(--dsa-hero__textbox--max-width),
+    transparent
   );
   --dsa-hero_right__overlay--background: linear-gradient(
     270deg,
-    var(--ks-color-bg-alpha-3) var(--dsa-hero__textbox--max-width),
+    var(--ks-color-bg-alpha-1) 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: 46rem;
+    --dsa-hero--min-height: 36rem;
     --dsa-hero--min-height_small: 20rem;
     --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
   }

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

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