@kickstartds/ds-agency-premium 1.6.71--canary.45.2035.0 → 1.6.71--canary.2073.560ebaa.0

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

@@ -188,7 +188,14 @@
   border-radius: var(--ks-border-radius-circle);
   background-color: var(--dsa-cookie-consent-dialogue__close--background-color, transparent);
 }
+.dsa-cookie-consent-dialogue__form {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
 .dsa-cookie-consent-dialogue__content {
+  flex: 1;
   overflow-y: auto;
   border-top: var(--dsa-cookie-consent-dialogue__content--border, var(--ks-border-color-interface) solid var(--ks-border-width-default));
   border-bottom: var(--dsa-cookie-consent-dialogue__content--border, var(--ks-border-color-interface) solid var(--ks-border-width-default));

package/dist/components/cookie-consent/cookie-consent.schema.dereffed.json

@@ -105,11 +105,6 @@
           "type": "string",
           "description": "The label for the revisit button",
           "default": "Manage Cookies"
-        },
-        "toggle": {
-          "type": "boolean",
-          "description": "Whether the revisit button is a toggle",
-          "default": true
         }
       },
       "additionalProperties": false
@@ -139,6 +134,13 @@
           "items": {
             "type": "object",
             "properties": {
+              "key": {
+                "type": "string",
+                "title": "Internal Key",
+                "examples": [
+                  "necessary"
+                ]
+              },
               "name": {
                 "type": "string",
                 "description": "The name of the required cookie",
@@ -191,6 +193,16 @@
           "items": {
             "type": "object",
             "properties": {
+              "key": {
+                "type": "string",
+                "title": "Internal Key",
+                "examples": [
+                  "functionality",
+                  "measurement",
+                  "experience",
+                  "marketing"
+                ]
+              },
               "name": {
                 "type": "string",
                 "description": "The name of the cookie category",
@@ -204,11 +216,6 @@
                 "examples": [
                   "These cookies are necessary for the website to function."
                 ]
-              },
-              "checked": {
-                "type": "boolean",
-                "description": "Whether the cookie category is checked by default",
-                "default": true
               }
             },
             "additionalProperties": false
@@ -237,6 +244,12 @@
         }
       },
       "additionalProperties": false
+    },
+    "component": {
+      "title": "`ks-component` attribute",
+      "description": "Optional custom component identifier",
+      "type": "string",
+      "default": "dsa.cookie-consent"
     }
   },
   "additionalProperties": false

package/dist/components/cookie-consent/cookie-consent.schema.json

@@ -11,14 +11,19 @@
       "properties": {
         "displayMode": {
           "type": "string",
-          "enum": ["card", "banner"],
+          "enum": [
+            "card",
+            "banner"
+          ],
           "description": "The display mode of the cookie consent component",
           "default": "card"
         },
         "title": {
           "type": "string",
           "description": "The title of the cookie consent section",
-          "examples": ["We value your privacy"]
+          "examples": [
+            "We value your privacy"
+          ]
         },
         "acceptButton": {
           "type": "object",
@@ -46,7 +51,9 @@
             "label": {
               "type": "string",
               "description": "The label for the customize button",
-              "examples": ["Customize Cookies"]
+              "examples": [
+                "Customize Cookies"
+              ]
             },
             "variant": {
               "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/variant"
@@ -74,11 +81,6 @@
           "type": "string",
           "description": "The label for the revisit button",
           "default": "Manage Cookies"
-        },
-        "toggle": {
-          "type": "boolean",
-          "description": "Whether the revisit button is a toggle",
-          "default": true
         }
       }
     },
@@ -90,7 +92,9 @@
         "title": {
           "type": "string",
           "description": "The title of the cookie consent dialogue",
-          "examples": ["Manage Cookie Preferences"]
+          "examples": [
+            "Manage Cookie Preferences"
+          ]
         },
         "description": {
           "type": "string",
@@ -105,10 +109,19 @@
           "items": {
             "type": "object",
             "properties": {
+              "key": {
+                "type": "string",
+                "title": "Internal Key",
+                "examples": [
+                  "necessary"
+                ]
+              },
               "name": {
                 "type": "string",
                 "description": "The name of the required cookie",
-                "examples": ["Session Cookie"]
+                "examples": [
+                  "Session Cookie"
+                ]
               },
               "description": {
                 "type": "string",
@@ -150,10 +163,22 @@
           "items": {
             "type": "object",
             "properties": {
+              "key": {
+                "type": "string",
+                "title": "Internal Key",
+                "examples": [
+                  "functionality",
+                  "measurement",
+                  "experience",
+                  "marketing"
+                ]
+              },
               "name": {
                 "type": "string",
                 "description": "The name of the cookie category",
-                "examples": ["Essential Cookies"]
+                "examples": [
+                  "Essential Cookies"
+                ]
               },
               "description": {
                 "type": "string",
@@ -161,11 +186,6 @@
                 "examples": [
                   "These cookies are necessary for the website to function."
                 ]
-              },
-              "checked": {
-                "type": "boolean",
-                "description": "Whether the cookie category is checked by default",
-                "default": true
               }
             }
           }
@@ -192,6 +212,12 @@
           "default": "Always Active"
         }
       }
+    },
+    "component": {
+      "title": "`ks-component` attribute",
+      "description": "Optional custom component identifier",
+      "type": "string",
+      "default": "dsa.cookie-consent"
     }
   },
   "additionalProperties": false

package/dist/components/cookie-consent/index.d.ts

@@ -10,7 +10,9 @@ import { HTMLAttributes } from "react";
  * Variant of button to be used
  */
 type Variant = "primary" | "secondary" | "tertiary";
+type InternalKey = string;
 type RequiredCookies = {
+    key?: InternalKey;
     /**
      * The name of the required cookie
      */
@@ -20,10 +22,16 @@ type RequiredCookies = {
      */
     description?: string;
 }[];
+type InternalKey1 = string;
+/**
+ * Optional custom component identifier
+ */
+type KsComponentAttribute = string;
 interface CookieConsentProps {
     notice?: InitialCookieConsentNotice;
     revisitButton?: RevisitCookieConsentButton;
     dialogue?: CookieConsentDialogue;
+    component?: KsComponentAttribute;
 }
 /**
  * The initial notice displayed to users regarding cookie consent.
@@ -70,10 +78,6 @@ interface RevisitCookieConsentButton {
      * The label for the revisit button
      */
     label?: string;
-    /**
-     * Whether the revisit button is a toggle
-     */
-    toggle?: boolean;
 }
 /**
  * The dialogue displayed when users choose to customize their cookie preferences.
@@ -107,6 +111,7 @@ interface CookieConsentDialogue {
      */
     decisionButtonVariant?: "secondary" | "tertiary";
     options?: {
+        key?: InternalKey1;
         /**
          * The name of the cookie category
          */
@@ -115,10 +120,6 @@ interface CookieConsentDialogue {
          * A description of the cookie category
          */
         description?: string;
-        /**
-         * Whether the cookie category is checked by default
-         */
-        checked?: boolean;
     }[];
     toggleLabels?: {
         /**

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

@@ -1,24 +1,20 @@
 import "./cookie-consent.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, createContext, useContext } from 'react';
+import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { Headline } from '../headline/index.js';
 import { Button } from '../button/index.js';
 import { RichText } from '@kickstartds/base/lib/rich-text';
 import Markdown from 'markdown-to-jsx';
 import { Radio } from '@kickstartds/form/lib/radio';
+import './CookieConsent.client.js';
 import '@kickstartds/base/lib/headline';
 import '../../helpers-12f48df8.js';
 import '@kickstartds/base/lib/button';
+import '@kickstartds/core/lib/component';
 
-const CookieConsentContextDefault = forwardRef(({ notice, revisitButton, dialogue }, ref) => {
-    const [showDialogue, setShowDialogue] = useState(false);
-    const [optionStates, setOptionStates] = useState(dialogue?.options?.map((option) => option.checked ?? true) // true = default checked
-    );
-    const handleRadioChange = (index, value) => {
-        setOptionStates((prev) => prev.map((checked, i) => (i === index ? value : checked)));
-    };
-    return (jsxs("div", { className: "dsa-cookie-consent", ref: ref, children: [jsxs("div", { className: classnames(`dsa-cookie-consent-notice dsa-cookie-consent-notice--${notice?.displayMode}`), children: [jsx(Headline, { spaceAfter: "minimum", text: notice?.title, level: "h2", style: "h3" }), jsx(RichText, { text: notice?.description }), jsxs("div", { className: "dsa-cookie-consent-notice__buttons", children: [jsx(Button, { size: "small", label: notice?.customizeButton?.label, variant: notice?.customizeButton?.variant, onClick: () => setShowDialogue(true) }), jsx(Button, { size: "small", label: notice?.rejectButton?.label, variant: notice?.decisionButtonVariant }), jsx(Button, { size: "small", label: notice?.acceptButton?.label, variant: notice?.decisionButtonVariant })] })] }), revisitButton && revisitButton.toggle && (jsx(Button, { className: "dsa-cookie-consent-revisit", size: "small", variant: "primary", icon: "star", label: revisitButton?.label || "Cookie Preferences", onClick: () => setShowDialogue(true) })), jsxs("div", { className: "dsa-cookie-consent-dialogue", hidden: !showDialogue, "aria-hidden": !showDialogue, children: [jsxs("div", { className: "dsa-cookie-consent-dialogue__header", children: [jsx(Headline, { spaceAfter: "minimum", text: dialogue?.title, level: "h2", style: "h3" }), jsx(Button, { "aria-label": "Close Cookie Consent Dialogue", className: "dsa-cookie-consent-dialogue__close", icon: "close", label: "", onClick: () => setShowDialogue(false) })] }), 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", children: [jsx(Headline, { spaceAfter: "minimum", text: option.name, level: "h3", style: "h4" }, index), 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", children: [jsx(Headline, { spaceAfter: "minimum", text: option.name, level: "h3", style: "h4" }, index), 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.name, checked: optionStates?.[index] ?? true, label: dialogue?.toggleLabels?.accept || "Accept", onChange: () => handleRadioChange(index, true) }), jsx(Radio, { name: option.name, checked: optionStates ? !optionStates[index] : false, label: dialogue?.toggleLabels?.reject || "Reject", onChange: () => handleRadioChange(index, false) })] })] }, index)))] })] }), jsxs("div", { className: "dsa-cookie-consent-dialogue__buttons", children: [jsx(Button, { size: "small", variant: dialogue?.decisionButtonVariant, label: dialogue?.buttons.acceptLabel || "Accept All", onClick: () => setOptionStates(optionStates?.map(() => true)) }), jsx(Button, { size: "small", variant: dialogue?.decisionButtonVariant, label: dialogue?.buttons.rejectLabel || "Reject All", onClick: () => setOptionStates(optionStates?.map(() => false)) }), jsx(Button, { size: "small", variant: "primary", label: dialogue?.buttons.savePreferencesLabel || "Save Preferences", onClick: () => setShowDialogue(false) })] })] }), jsx("div", { className: "dsa-cookie-consent-overlay", hidden: !showDialogue })] }));
+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 })] }));
 });
 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: 1px solid var(--ks-border-color-default);
+  --dsa-footer--border-top: none;
   --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,51 @@
       "examples": [
         [
           {
-            "label": "Active Item",
+            "label": "Fahrzeugsuche",
             "url": "#",
             "active": true
           },
           {
-            "label": "Navigation Item",
-            "url": "#"
-          },
-          {
-            "label": "Dropdown",
+            "label": "Marken",
             "url": "#",
             "items": [
               {
-                "label": "Level 2 Item",
+                "label": "Nissan",
                 "url": "#"
               },
               {
-                "label": "Active Item",
+                "label": "Kia",
                 "active": true,
                 "url": "#"
               },
               {
-                "label": "An Item with a longer Label",
+                "label": "Maserati",
                 "url": "#"
               },
               {
-                "label": "And One last one",
+                "label": "Corvette",
                 "url": "#"
               }
             ]
           },
           {
-            "label": "One more Item",
+            "label": "Standorte",
+            "url": "#"
+          },
+          {
+            "label": "Bonusprogramm",
+            "url": "#"
+          },
+          {
+            "label": "News",
+            "url": "#"
+          },
+          {
+            "label": "Jobs",
             "url": "#"
           },
           {
-            "label": "Last Item",
+            "label": "Kontakt",
             "url": "#"
           }
         ]

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

@@ -120,43 +120,51 @@
       "examples": [
         [
           {
-            "label": "Active Item",
+            "label": "Fahrzeugsuche",
             "url": "#",
             "active": true
           },
           {
-            "label": "Navigation Item",
-            "url": "#"
-          },
-          {
-            "label": "Dropdown",
+            "label": "Marken",
             "url": "#",
             "items": [
               {
-                "label": "Level 2 Item",
+                "label": "Nissan",
                 "url": "#"
               },
               {
-                "label": "Active Item",
+                "label": "Kia",
                 "active": true,
                 "url": "#"
               },
               {
-                "label": "An Item with a longer Label",
+                "label": "Maserati",
                 "url": "#"
               },
               {
-                "label": "And One last one",
+                "label": "Corvette",
                 "url": "#"
               }
             ]
           },
           {
-            "label": "One more Item",
+            "label": "Standorte",
+            "url": "#"
+          },
+          {
+            "label": "Bonusprogramm",
+            "url": "#"
+          },
+          {
+            "label": "News",
+            "url": "#"
+          },
+          {
+            "label": "Jobs",
             "url": "#"
           },
           {
-            "label": "Last Item",
+            "label": "Kontakt",
             "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.35em;
+  --dsa-headline--gap: 0.5em;
   --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-color-fg-to-bg-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-l);
+  --dsa-headline_h2--space-after_large: var(--ks-spacing-stack-xl);
   --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);
@@ -58,39 +58,81 @@
   visibility: visible;
 }
 .dsa-headline--h1 {
-  font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
-  --subheadline--font-size: var(--dsa-headline_h1--font-size, 50%);
+  --subheadline--font-size: var(--dsa-headline_h1__subheadline--font-size, 50%);
   --headline--space-after_minimum: var(--dsa-headline_h1--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h1--space-after_small);
   --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 {
-  font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
   --subheadline--font-size: var(--dsa-headline_h2__subheadline--font-size, 50%);
   --headline--space-after_minimum: var(--dsa-headline_h2--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h2--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h2--space-after_large);
+  font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
 }
 .dsa-headline--h3 {
-  font: var(--dsa-headline_h3--font, var(--ks-font-display-l));
   --subheadline--font-size: var(--dsa-headline_h3__subheadline--font-size, 50%);
   --headline--space-after_minimum: var(--dsa-headline_h3--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h3--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h3--space-after_large);
+  font: var(--dsa-headline_h3--font, var(--ks-font-display-l));
 }
 .dsa-headline--h4 {
-  font: var(--dsa-headline_h4--font, var(--ks-font-display-m));
   --subheadline--font-size: var(--dsa-headline_h4__subheadline--font-size, 75%);
   --headline--space-after_minimum: var(--dsa-headline_h4--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h4--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h4--space-after_large);
+  font: var(--dsa-headline_h4--font, var(--ks-font-display-m));
 }
 .dsa-headline--p {
-  font: var(--dsa-headline_p--font, var(--ks-font-copy-m));
   --subheadline--font-size: var(--dsa-headline_p__subheadline--font-size, 75%);
   --headline--space-after_minimum: var(--dsa-headline_p--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_p--space-after_small);
   --headline--space-after_large: var(--dsa-headline_p--space-after_large);
+  font: var(--dsa-headline_p--font, var(--ks-font-copy-m));
 }
 .dsa-headline .dsa-headline__headline {
   color: var(--dsa-headline--color, var(--ks-text-color-display));

package/dist/components/hero/hero.css

@@ -32,6 +32,16 @@
     var(--ks-color-primary-alpha-5) 0%,
     var(--ks-color-bg-alpha-4) 100%
   );
+  --dsa-hero_corner__overlay--background: linear-gradient(
+    40deg,
+    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),
@@ -150,6 +160,18 @@
 .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/image-story.schema.dereffed.json

@@ -108,6 +108,15 @@
             "title": "Disabled?",
             "description": "Whether the button should be disabled",
             "default": false
+          },
+          "type": {
+            "type": "string",
+            "title": "Button Type",
+            "enum": [
+              "button",
+              "submit",
+              "reset"
+            ]
           }
         },
         "additionalProperties": false,

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

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

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

@@ -1,5 +1,5 @@
 .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-xs) var(--ks-spacing-xxs);
   --dsa-nav-dropdown--background: var(--ks-background-color-default);
   --dsa-nav-dropdown--border-radius: var(--ks-border-radius-card);
   --dsa-nav-dropdown--box-shadow: var(--ks-box-shadow-card);
@@ -8,7 +8,7 @@
   --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_hover: unset;
   --dsa-nav-dropdown__label--background-color_active: unset;
   --dsa-nav-dropdown__label--border-radius: var(--ks-border-radius-control);
   --dsa-nav-dropdown__label--font: var(--ks-font-interface-s);
@@ -16,7 +16,7 @@
   --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_dimmed--opacity: 1;
+  --dsa-nav-dropdown__label_dimmed--opacity: 0.6;
 }
 .dsa-nav-dropdown[ks-inverted=true] {
   --dsa-nav-dropdown--background: var(--ks-color-fg-inverted);