@kickstartds/ds-agency-premium 1.6.71--canary.2076.4321698.0 → 1.6.71--canary.45.2079.0

package/dist/components/presets.json

@@ -2904,7 +2904,7 @@
     "id": "layout-footer--footer",
     "group": "Layout/Footer",
     "name": "Footer",
-    "code": "<Footer\n  byline=\"© 2024 systemics Inc. All rights reserved.\"\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    inverted: false,\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Fahrzeugsuche',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Nissan',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Kia',\n          url: '#'\n        },\n        {\n          label: 'Maserati',\n          url: '#'\n        },\n        {\n          label: 'Corvette',\n          url: '#'\n        }\n      ],\n      label: 'Marken',\n      url: '#'\n    },\n    {\n      label: 'Standorte',\n      url: '#'\n    },\n    {\n      label: 'Bonusprogramm',\n      url: '#'\n    },\n    {\n      label: 'News',\n      url: '#'\n    },\n    {\n      label: 'Jobs',\n      url: '#'\n    },\n    {\n      label: 'Kontakt',\n      url: '#'\n    }\n  ]}\n/>",
+    "code": "<Footer\n  byline=\"© 2024 systemics Inc. All rights reserved.\"\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    inverted: false,\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Active Item',\n      url: '#'\n    },\n    {\n      label: 'Navigation Item',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Dropdown',\n      url: '#'\n    },\n    {\n      label: 'One more Item',\n      url: '#'\n    },\n    {\n      label: 'Last Item',\n      url: '#'\n    }\n  ]}\n/>",
     "args": {
       "logo": {
         "src": "/logo.svg",
@@ -2920,51 +2920,43 @@
       "navItems": [
         {
           "url": "#",
-          "label": "Fahrzeugsuche",
+          "label": "Active Item",
           "active": true
         },
         {
           "url": "#",
-          "label": "Marken",
+          "label": "Navigation Item"
+        },
+        {
+          "url": "#",
+          "label": "Dropdown",
           "items": [
             {
               "url": "#",
-              "label": "Nissan"
+              "label": "Level 2 Item"
             },
             {
               "url": "#",
-              "label": "Kia",
+              "label": "Active Item",
               "active": true
             },
             {
               "url": "#",
-              "label": "Maserati"
+              "label": "An Item with a longer Label"
             },
             {
               "url": "#",
-              "label": "Corvette"
+              "label": "And One last one"
             }
           ]
         },
         {
           "url": "#",
-          "label": "Standorte"
-        },
-        {
-          "url": "#",
-          "label": "Bonusprogramm"
-        },
-        {
-          "url": "#",
-          "label": "News"
-        },
-        {
-          "url": "#",
-          "label": "Jobs"
+          "label": "One more Item"
         },
         {
           "url": "#",
-          "label": "Kontakt"
+          "label": "Last Item"
         }
       ]
     },
@@ -3145,7 +3137,7 @@
     "id": "layout-header--header",
     "group": "Layout/Header",
     "name": "Header",
-    "code": "<Header\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Fahrzeugsuche',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Nissan',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Kia',\n          url: '#'\n        },\n        {\n          label: 'Maserati',\n          url: '#'\n        },\n        {\n          label: 'Corvette',\n          url: '#'\n        }\n      ],\n      label: 'Marken',\n      url: '#'\n    },\n    {\n      label: 'Standorte',\n      url: '#'\n    },\n    {\n      label: 'Bonusprogramm',\n      url: '#'\n    },\n    {\n      label: 'News',\n      url: '#'\n    },\n    {\n      label: 'Jobs',\n      url: '#'\n    },\n    {\n      label: 'Kontakt',\n      url: '#'\n    }\n  ]}\n/>",
+    "code": "<Header\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    homepageHref: '#',\n    src: '/logo.svg',\n    srcInverted: '/logo-inverted.svg',\n    width: 176\n  }}\n  navItems={[\n    {\n      active: true,\n      label: 'Active Item',\n      url: '#'\n    },\n    {\n      label: 'Navigation Item',\n      url: '#'\n    },\n    {\n      items: [\n        {\n          label: 'Level 2 Item',\n          url: '#'\n        },\n        {\n          active: true,\n          label: 'Active Item',\n          url: '#'\n        },\n        {\n          label: 'An Item with a longer Label',\n          url: '#'\n        },\n        {\n          label: 'And One last one',\n          url: '#'\n        }\n      ],\n      label: 'Dropdown',\n      url: '#'\n    },\n    {\n      label: 'One more Item',\n      url: '#'\n    },\n    {\n      label: 'Last Item',\n      url: '#'\n    }\n  ]}\n/>",
     "args": {
       "logo": {
         "src": "/logo.svg",
@@ -3162,51 +3154,43 @@
       "navItems": [
         {
           "url": "#",
-          "label": "Fahrzeugsuche",
+          "label": "Active Item",
           "active": true
         },
         {
           "url": "#",
-          "label": "Marken",
+          "label": "Navigation Item"
+        },
+        {
+          "url": "#",
+          "label": "Dropdown",
           "items": [
             {
               "url": "#",
-              "label": "Nissan"
+              "label": "Level 2 Item"
             },
             {
               "url": "#",
-              "label": "Kia",
+              "label": "Active Item",
               "active": true
             },
             {
               "url": "#",
-              "label": "Maserati"
+              "label": "An Item with a longer Label"
             },
             {
               "url": "#",
-              "label": "Corvette"
+              "label": "And One last one"
             }
           ]
         },
         {
           "url": "#",
-          "label": "Standorte"
-        },
-        {
-          "url": "#",
-          "label": "Bonusprogramm"
-        },
-        {
-          "url": "#",
-          "label": "News"
-        },
-        {
-          "url": "#",
-          "label": "Jobs"
+          "label": "One more Item"
         },
         {
           "url": "#",
-          "label": "Kontakt"
+          "label": "Last Item"
         }
       ]
     },
@@ -4371,7 +4355,7 @@
     "id": "layout-split-even--text-with-logos",
     "group": "Layout/Split Even",
     "name": "TextWithLogos",
-    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"wide\"\n  first={<><Cta buttons={[{label: 'Learn more'}]} headline=\"Discover our solutions for Industry 4.0\" highlightText text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n  horizontalGutter=\"default\"\n  second={<><Logos logo={[{alt: 'Logo 1', src: 'img/logos/logoipsum-344.svg'}, {alt: 'Logo 2', src: 'img/logos/logoipsum-347.svg'}, {alt: 'Logo 3', src: 'img/logos/logoipsum-352.svg'}, {alt: 'Logo 4', src: 'img/logos/logoipsum-356.svg'}, {alt: 'Logo 5', src: 'img/logos/logoipsum-358.svg'}, {alt: 'Logo 6', src: 'img/logos/logoipsum-369.svg'}]} logosPerRow={3}/></>}\n  verticalAlign=\"center\"\n  verticalGutter=\"default\"\n/>",
+    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"wide\"\n  firstComponents={<><Cta buttons={[{label: 'Learn more'}]} headline=\"Discover our solutions for Industry 4.0\" highlightText text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n  horizontalGutter=\"default\"\n  secondComponents={<><Logos logo={[{alt: 'Logo 1', src: 'img/logos/logoipsum-344.svg'}, {alt: 'Logo 2', src: 'img/logos/logoipsum-347.svg'}, {alt: 'Logo 3', src: 'img/logos/logoipsum-352.svg'}, {alt: 'Logo 4', src: 'img/logos/logoipsum-356.svg'}, {alt: 'Logo 5', src: 'img/logos/logoipsum-358.svg'}, {alt: 'Logo 6', src: 'img/logos/logoipsum-369.svg'}]} logosPerRow={3}/></>}\n  verticalAlign=\"center\"\n  verticalGutter=\"default\"\n/>",
     "args": {
       "contentMinWidth": "wide",
       "contentGutter": "small",
@@ -4379,7 +4363,7 @@
       "verticalAlign": "center",
       "verticalGutter": "default",
       "horizontalGutter": "default",
-      "first": {
+      "firstComponents": {
         "key": null,
         "ref": null,
         "props": {
@@ -4402,7 +4386,7 @@
         },
         "_owner": null
       },
-      "second": {
+      "secondComponents": {
         "key": null,
         "ref": null,
         "props": {
@@ -4451,7 +4435,7 @@
     "id": "layout-split-even--faq-with-form",
     "group": "Layout/Split Even",
     "name": "FAQWithForm",
-    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"medium\"\n  first={<><Headline level=\"h2\" text=\"Frequently Asked Questions\"/><Faq questions={[{answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What are the benefits of investing in a Design System?'}, {answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What is a Design System?'}, {answer: 'A Headless CMS plays a crucial role in a Design System by providing a content-first approach. It separates the back-end content from the front-end presentation layer, allowing for seamless integration with any design system. This results in a flexible, scalable, and platform-agnostic system that ensures content consistency across all platforms and devices.', question: 'What is the role of a Headless CMS in a Design System?'}]} /></>}\n  horizontalGutter=\"large\"\n  second={<><Headline level=\"h3\" spaceAfter=\"minimum\" style=\"h3\" text=\"Still have questions?\"/><No Display Name label=\"Ask us directly!\" /><Button label=\"Submit\" /></>}\n  sectionMinWidth=\"medium\"\n  verticalAlign=\"top\"\n  verticalGutter=\"large\"\n/>",
+    "code": "<SplitEven\n  contentGutter=\"small\"\n  contentMinWidth=\"medium\"\n  firstComponents={<><Headline level=\"h2\" text=\"Frequently Asked Questions\"/><Faq questions={[{answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What are the benefits of investing in a Design System?'}, {answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What is a Design System?'}, {answer: 'A Headless CMS plays a crucial role in a Design System by providing a content-first approach. It separates the back-end content from the front-end presentation layer, allowing for seamless integration with any design system. This results in a flexible, scalable, and platform-agnostic system that ensures content consistency across all platforms and devices.', question: 'What is the role of a Headless CMS in a Design System?'}]} /></>}\n  horizontalGutter=\"large\"\n  secondComponents={<><Headline level=\"h3\" spaceAfter=\"minimum\" style=\"h3\" text=\"Still have questions?\"/><No Display Name label=\"Ask us directly!\" /><Button label=\"Submit\" /></>}\n  sectionMinWidth=\"medium\"\n  verticalAlign=\"top\"\n  verticalGutter=\"large\"\n/>",
     "args": {
       "contentMinWidth": "medium",
       "contentGutter": "small",
@@ -4460,7 +4444,7 @@
       "verticalGutter": "large",
       "horizontalGutter": "large",
       "sectionMinWidth": "medium",
-      "first": {
+      "firstComponents": {
         "key": null,
         "ref": null,
         "props": {
@@ -4501,7 +4485,7 @@
         },
         "_owner": null
       },
-      "second": {
+      "secondComponents": {
         "key": null,
         "ref": null,
         "props": {

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-4e3c6fe0.js";
+import { SectionProps } from "../../SectionProps-d60aba86.js";
 declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/section/index.js

@@ -42,9 +42,7 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
         spotlight,
         content?.mode === "slider",
     ]);
-    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style &&
-            style !== "default" &&
-            `dsa-section--style dsa-section--style-${style}`, transition &&
+    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style && style !== "default" && `dsa-section-style--${style}`, transition &&
             transition !== "none" &&
             `dsa-section--transition-${transition}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor === "default"
             ? "default"

package/dist/components/section/section.css

@@ -26,20 +26,18 @@
   --dsa-section--background-color_default: var(--ks-background-color-default);
   --dsa-section--background-color_accent: var(--ks-background-color-accent);
   --dsa-section--background-color_bold: var(--ks-background-color-bold);
-  --dsa-section_shine-left--background-image: radial-gradient(
-    80% 150% at 20% 50%,
-    var(--ks-color-fg-inverted),
-    var(--ks-color-bg-inverted-alpha-8)
+  --dsa-section--transition_to-default: linear-gradient(
+    178deg,
+    transparent 75%,
+    var(--ks-background-color-default) 75%
   );
-  --dsa-section_shine-right--background-image: radial-gradient(
-    80% 150% at 80% 50%,
-    var(--ks-color-fg-inverted),
-    var(--ks-color-bg-inverted-alpha-8)
+  --dsa-section--transition_to-accent: linear-gradient(178deg, transparent 75%, var(--ks-background-color-accent) 75%);
+  --dsa-section--transition_to-bold: linear-gradient(178deg, transparent 75%, var(--ks-background-color-bold) 75%);
+  --dsa-section--transition_to-inverted: linear-gradient(
+    178deg,
+    transparent 75%,
+    var(--ks-background-color-default-inverted) 75%
   );
-  --dsa-section--transition_to-default: linear-gradient(transparent, var(--ks-background-color-default));
-  --dsa-section--transition_to-accent: linear-gradient(transparent, var(--ks-background-color-accent));
-  --dsa-section--transition_to-bold: linear-gradient(transparent, var(--ks-background-color-bold));
-  --dsa-section--transition_to-inverted: linear-gradient(transparent, var(--ks-background-color-default-inverted));
   --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
   --dsa-section__slider-arrow--size: 2rem;
   --dsa-section__slider-arrow--padding: 0.5em;
@@ -51,18 +49,6 @@
   --dsa-section__spotlight--blur: 0%;
   --dsa-section__spotlight--color: var(--ks-color-primary-alpha-5);
 }
-.dsa-section[ks-inverted=true] {
-  --dsa-section_shine-left--background-image: radial-gradient(
-    70% 150% at 20% 50%,
-    var(--ks-color-fg-inverted-alpha-8-base),
-    var(--ks-color-bg)
-  );
-  --dsa-section_shine-right--background-image: radial-gradient(
-    70% 150% at 80% 50%,
-    var(--ks-color-fg-inverted-alpha-87-base),
-    var(--ks-color-bg)
-  );
-}
 
 .l-section.dsa-section {
   --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
@@ -95,14 +81,11 @@
 }
 
 .l-section.dsa-section {
-  --dsa-section--background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
   background-image: var(--dsa-section--background-image);
-  background-color: var(--dsa-section--background-color, var(--ks-color-bg));
+  background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
   position: relative;
 }
 .l-section.dsa-section .l-section__container {
-  position: relative;
-  z-index: 2;
   font: var(--ks-font-copy-m);
 }
 .l-section.dsa-section.l-section--gutter-large {
@@ -115,10 +98,10 @@
   --l-section--gutter: var(--dsa-section--gutter_none);
 }
 .l-section.dsa-section.l-section--accent {
-  --dsa-section--background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
+  background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
 }
 .l-section.dsa-section.l-section--bold {
-  --dsa-section--background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
+  background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
 }
 .l-section.dsa-section.dsa-section--transition-to-accent {
   background-image: var(--dsa-section--transition_to-accent, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
@@ -141,49 +124,22 @@
 .l-section.dsa-section--header-spacing.l-section--space-before-small {
   padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space-small));
 }
-.l-section.dsa-section--style::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-}
-.l-section.dsa-section--style--framed {
+.l-section.dsa-section-style--framed {
   --frame-background-color: var(--ks-background-color-accent);
 }
-.l-section.dsa-section--style--framed .l-section__container--content .l-section__content {
+.l-section.dsa-section-style--framed .l-section__container--content .l-section__content {
   padding: var(--dsa-section--space_default);
   background-color: var(--frame-background-color, var(--ks-background-color-default));
   border-radius: var(--ks-border-radius-surface);
 }
-.l-section.dsa-section--style--framed.l-section--accent, .l-section.dsa-section--style--framed.l-section--bold {
+.l-section.dsa-section-style--framed.l-section--accent, .l-section.dsa-section-style--framed.l-section--bold {
   --frame-background-color: var(--ks-background-color-default);
 }
-.l-section.dsa-section--style-shine-left::before {
-  background-image: var(--dsa-section_shine-left--background-image, radial-gradient(70% 150% at 20% 50%, var(--ks-color-fg-inverted), var(--ks-color-bg-inverted-alpha-7)));
-}
-.l-section.dsa-section--style-shine-right::before {
-  background-image: var(--dsa-section_shine-right--background-image, radial-gradient(70% 150% at 80% 50%, var(--ks-color-fg-inverted-alpha-8-base), var(--ks-color-bg)));
-}
-.l-section.dsa-section--style-carbon::before {
-  background: radial-gradient(var(--ks-color-fg-inverted-alpha-7) 15%, transparent 16%) 0 0, radial-gradient(var(--ks-color-fg-inverted-alpha-7) 15%, transparent 16%) 8px 8px, radial-gradient(var(--ks-color-fg-alpha-9) 15%, transparent 20%) 0 1px, radial-gradient(var(--ks-color-fg-alpha-9) 15%, transparent 20%) 8px 9px;
-  background-size: 16px 16px;
-  z-index: 1;
-}
-.l-section.dsa-section--style-carbon::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-  background: linear-gradient(180deg, var(--ks-color-fg-alpha-9) 0%, transparent 5px), linear-gradient(180deg, var(--ks-color-fg-alpha-9) 0%, transparent 30px), linear-gradient(180deg, transparent calc(100% - 30px), var(--ks-color-fg-alpha-9) 100%), linear-gradient(180deg, transparent calc(100% - 5px), var(--ks-color-fg-alpha-9) 100%), radial-gradient(100% 100% at 50% 50%, var(--ks-color-bg), var(--ks-color-bg-to-fg-1));
+.l-section.dsa-section-style--deko {
+  background-image: var(--dsa-section_deko--background-image, radial-gradient(180deg, transparent 0%, var(--ks-background-color-default) 100%));
 }
-.l-section.dsa-section--style-stripe::before {
-  background-image: linear-gradient(45deg, transparent 5%, var(--ks-color-bg-inverted-alpha-8) 5%, var(--ks-color-bg-inverted-alpha-8) 18%, transparent 18%), linear-gradient(180deg, transparent calc(100% - 30px), var(--ks-color-fg-alpha-9) 100%), linear-gradient(180deg, transparent calc(100% - 5px), var(--ks-color-fg-alpha-9) 100%);
+.l-section.dsa-section-style--colorful {
+  background-image: var(--dsa-section_colorful--background-image, linear-gradient(145deg, var(--ks-color-primary) 30%, #4aaea9 100%));
 }
 .l-section.dsa-section--spotlight {
   position: relative;

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

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

package/dist/components/section/section.schema.json

@@ -16,14 +16,7 @@
       "type": "string",
       "title": "Style",
       "description": "Style of background",
-      "enum": [
-        "default",
-        "framed",
-        "shine-left",
-        "shine-right",
-        "carbon",
-        "stripe"
-      ],
+      "enum": ["default", "framed", "deko"],
       "default": "default"
     },
     "backgroundColor": {

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

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

package/dist/components/split-even/split-even.css

@@ -9,7 +9,7 @@
   --dsa-split-even__content--gutter_small: var(--ks-spacing-stack-s);
   --dsa-split-even__content--gutter_default: var(--ks-spacing-stack-m);
   --dsa-split-even__content--gutter_large: var(--ks-spacing-stack-xl);
-  --dsa-split-even__content--flex-basis_narrow: var(--dsa-tile--width_small);
+  --dsa-split-even__content--flex-basis_narrow: var(--dsa-tile--width_medium);
   --dsa-split-even__content--flex-basis_medium: var(--dsa-tile--width_large);
   --dsa-split-even__content--flex-basis_wide: var(--dsa-tile--width_largest);
 }

package/dist/components/stats/stats.css

@@ -1,15 +1,15 @@
 .dsa-stats {
   --dsa-stats--gap-vertical: var(--ks-spacing-stack-l);
   --dsa-stats--gap-horizontal: var(--ks-spacing-inline-m);
-  --dsa-stats__item--gap: var(--ks-spacing-stack-s);
+  --dsa-stats__item--gap: var(--ks-spacing-stack-xs);
   --dsa-stats__icon--color: var(--ks-text-color-primary);
-  --dsa-stats__icon--size: 4em;
-  --dsa-stats__number--font: var(--ks-font-display-xxl);
+  --dsa-stats__icon--size: 5em;
+  --dsa-stats__number--font: var(--ks-font-display-xl);
   --dsa-stats__number--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-stats__number--background: var(--dsa-typo--highlight);
   --dsa-stats__topic__font: var(--ks-font-interface-xl);
   --dsa-stats__topic--color: var(--ks-text-color-display);
-  --dsa-stats__copy--font: var(--ks-font-copy-m);
+  --dsa-stats__copy--font: var(--ks-font-copy-s);
   --dsa-stats__copy--color: var(--ks-text-color-default);
 }
 

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

@@ -8,29 +8,28 @@
   --dsa-teaser-card--border-width: var(--ks-border-width-default);
   --dsa-teaser-card--border-color: var(--ks-border-color-card-interactive);
   --dsa-teaser-card--border-color_hover: var(--ks-border-color-card-interactive-hover);
-  --dsa-teaser-card--border-radius: var(--ks-border-radius-card);
-  --dsa-teaser-card--shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 2px 4px rgba(0, 0, 0, 0.02),
-    0px 4px 9px rgba(0, 0, 0, 0.03), 0px 6px 15px rgba(0, 0, 0, 0.04), 0px 10px 24px rgba(0, 0, 0, 0.05);
-  --dsa-teaser-card--shadow_hover: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 2px 4px rgba(0, 0, 0, 0.02),
-    0px 4px 9px rgba(0, 0, 0, 0.03), 0px 6px 15px rgba(0, 0, 0, 0.04), 0px 10px 24px rgba(0, 0, 0, 0.05);
-  --dsa-teaser-card__image--transform_hover: scale(1.1);
-  --dsa-teaser-card__image--transition: transform var(--ks-transition-fade);
+  --dsa-teaser-card--border-radius: var(--ks-border-radius-card) var(--ks-border-radius-card)
+    var(--ks-border-radius-card) calc(var(--ks-border-radius-card) * 3);
+  --dsa-teaser-card--shadow: none;
+  --dsa-teaser-card--shadow_hover: none;
+  --dsa-teaser-card__image--transform_hover: scale(1.05);
+  --dsa-teaser-card__image--transition: transform var(--ks-transition-hover);
   --dsa-teaser__body--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
   --dsa-teaser-card__topic--color: var(--dsa-topic--color);
-  --dsa-teaser-card__label--font: var(--ks-font-interface-xs);
+  --dsa-teaser-card__label--font: var(--ks-font-interface-s);
   --dsa-teaser-card__label--font-weight: var(--ks-font-weight-semi-bold);
-  --dsa-teaser-card__label--color: var(--dsa-text-color-on-primary);
-  --dsa-teaser-card__label--background-color: var(--ks-background-color-primary);
+  --dsa-teaser-card__label--color: var(--ks-text-color-primary);
+  --dsa-teaser-card__label--background-color: var(--ks-background-color-bold);
   --dsa-teaser-card__label--padding: 0.5em 1em;
   --dsa-teaser-card__label--border-radius: var(--ks-border-radius-pill);
-  --dsa-teaser-card__label--border: 0;
+  --dsa-teaser-card__label--border: 1px solid var(--ks-border-color-interface);
   --dsa-teaser-card__button--font: var(--ks-font-interface-m);
   --dsa-teaser-card--padding: var(--ks-spacing-inset-m);
   --dsa-teaser-card__topic--font: var(--ks-font-display-m);
   --dsa-teaser-card__topic--font-weight: var(--dsa-topic--font-weight);
   --dsa-teaser-card__copy--font: var(--ks-font-copy-s);
   --dsa-teaser-card__copy--color: var(--ks-text-color-default);
-  --dsa-teaser-card__copy--margin-top: 0.85em;
+  --dsa-teaser-card__copy--margin-top: 0.5em;
   --dsa-teaser-card__button--font: var(--ks-font-interface-s);
 }
 @container teaser-card (min-width: 400px) {
@@ -124,12 +123,13 @@
 .dsa-teaser-card .dsa-teaser-card__label {
   position: absolute;
   z-index: 1;
-  top: var(--ks-spacing-inset-xs);
-  right: var(--ks-spacing-inset-xs);
+  top: 0;
+  right: 0;
   border-radius: var(--dsa-teaser-card__label--border-radius);
   border: var(--dsa-teaser-card__label--border, 0);
   pointer-events: initial;
   padding: var(--dsa-teaser-card__label--padding);
+  transform: translate(0.5em, -50%);
   font: var(--dsa-teaser-card__label--font);
   text-align: center;
   font-weight: var(--dsa-teaser-card__label--font-weight);

package/dist/global.css

@@ -313,7 +313,7 @@ h3 {
   --dsa-link--color_hover: var(--ks-text-color-default-interactive-hover);
   --dsa-link--text-decoration: none;
   --dsa-link--text-decoration_hover: none;
-  --dsa-typo--highlight: var(--ks-text-color-primary);
+  --dsa-typo--highlight: var(--ks-color-primary);
   --dsa-content--horizontal-spacing: var(--ks-spacing-inset-l);
   --dsa-content--vertical-spacing: var(--ks-spacing-xxl);
   --dsa-content--width_narrow: calc(var(--ks-font-size-copy-m) * 34);
@@ -341,7 +341,7 @@ h3 {
 }
 @media (min-width: 62em) {
   :root, [ks-inverted], [ks-theme] {
-    --dsa-logo--height: 3.5rem;
+    --dsa-logo--height: 2.5rem;
   }
 }
 
@@ -662,16 +662,6 @@ h3 {
 :root .c-form-check--radio, [ks-inverted] .c-form-check--radio, [ks-theme] .c-form-check--radio {
   --c-form-check_box--border-radius: var(--dsa-check_radio--border-radius, var(--ks-border-radius-circle));
 }
-:root .c-form-check-group, [ks-inverted] .c-form-check-group, [ks-theme] .c-form-check-group {
-  display: flex;
-  gap: var(--ks-spacing-stack-xs);
-  flex-direction: column;
-}
-:root .c-form-check-group__group, [ks-inverted] .c-form-check-group__group, [ks-theme] .c-form-check-group__group {
-  display: flex;
-  gap: var(--ks-spacing-xxs);
-  flex-direction: column;
-}
 :root .c-form-field, [ks-inverted] .c-form-field, [ks-theme] .c-form-field {
   --c-form-field_label--padding: 0 0 var(--dsa-input__label--padding-bottom, 0.25em) 0;
   --c-form-field--border: var(--dsa-input--border, var(--ks-border-width-default) solid);