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

package/dist/components/search/search.schema.json

@@ -4,12 +4,6 @@
   "title": "Search",
   "type": "object",
   "properties": {
-    "headline": {
-      "$ref": "http://schema.mydesignsystem.com/headline.schema.json"
-    },
-    "searchBar": {
-      "$ref": "http://schema.mydesignsystem.com/search-bar.schema.json"
-    },
     "searchFilter": {
       "$ref": "http://schema.mydesignsystem.com/search-filter.schema.json"
     },

package/dist/components/search-bar/index.d.ts

@@ -1,5 +1,33 @@
 /// <reference types="react" />
-import { SearchBarProps } from "../../SearchBarProps-26263244.js";
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+/**
+ * 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;
+}
 declare const SearchBarContextDefault: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const SearchBarContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>>;
 declare const SearchBar: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-d60aba86.js";
+import { SectionProps } from "../../SectionProps-2a23ef89.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/section.css

@@ -26,17 +26,13 @@
   --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--transition_to-default: linear-gradient(
-    178deg,
-    transparent 75%,
-    var(--ks-background-color-default) 75%
-  );
-  --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-default: linear-gradient(180deg, transparent, var(--ks-background-color-default));
+  --dsa-section--transition_to-accent: linear-gradient(180deg, transparent, var(--ks-background-color-accent));
+  --dsa-section--transition_to-bold: linear-gradient(180deg, transparent, var(--ks-background-color-bold));
   --dsa-section--transition_to-inverted: linear-gradient(
-    178deg,
-    transparent 75%,
-    var(--ks-background-color-default-inverted) 75%
+    180deg,
+    transparent,
+    var(--ks-background-color-default-inverted)
   );
   --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
   --dsa-section__slider-arrow--size: 2rem;
@@ -139,8 +135,8 @@
 .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--colorful {
-  background-image: var(--dsa-section_colorful--background-image, linear-gradient(145deg, var(--ks-color-primary) 30%, #4aaea9 100%));
+.l-section.dsa-section-style--inset {
+  background-image: 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--spotlight {
   position: relative;

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

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

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

@@ -16,7 +16,7 @@
       "type": "string",
       "title": "Style",
       "description": "Style of background",
-      "enum": ["default", "framed", "deko"],
+      "enum": ["default", "framed", "inset"],
       "default": "default"
     },
     "backgroundColor": {

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

@@ -132,16 +132,54 @@
           "examples": [
             [
               {
-                "label": "Active Item",
+                "label": "Beamer",
                 "url": "#",
-                "active": true
+                "active": true,
+                "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": "Navigation Item",
-                "url": "#"
+                "label": "Interaktive Displays",
+                "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": "Dropdown",
+                "label": "Professional Displays",
                 "url": "#",
                 "items": [
                   {
@@ -164,12 +202,119 @@
                 ]
               },
               {
-                "label": "One more Item",
-                "url": "#"
+                "label": "LED Displays",
+                "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": "Last Item",
-                "url": "#"
+                "label": "Lösungen",
+                "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": "Zubehör",
+                "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",
+                "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": "Support",
+                "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": "#"
+                  }
+                ]
               }
             ]
           ]
@@ -286,16 +431,54 @@
           "examples": [
             [
               {
-                "label": "Active Item",
+                "label": "Beamer",
                 "url": "#",
-                "active": true
+                "active": true,
+                "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": "Navigation Item",
-                "url": "#"
+                "label": "Interaktive Displays",
+                "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": "Dropdown",
+                "label": "Professional Displays",
                 "url": "#",
                 "items": [
                   {
@@ -318,12 +501,119 @@
                 ]
               },
               {
-                "label": "One more Item",
-                "url": "#"
+                "label": "LED Displays",
+                "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": "Last Item",
-                "url": "#"
+                "label": "Lösungen",
+                "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": "Zubehör",
+                "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",
+                "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": "Support",
+                "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": "#"
+                  }
+                ]
               }
             ]
           ]

package/dist/components/slider/slider.css

@@ -2,8 +2,8 @@
   --dsa-slider__arrow--background-color: var(--ks-color-fg-alpha-4);
   --dsa-slider__arrow--background-color_hover: var(--ks-color-fg-alpha-3);
   --dsa-slider__arrow--background-color_active: var(--ks-color-fg-alpha-3);
-  --dsa-slider__bullet--border-color: var(--ks-border-color-default);
-  --dsa-slider__bullet--border-color_hover: var(--ks-border-color-default);
+  --dsa-slider__bullet--border-color: var(--ks-border-color-interface-interactive);
+  --dsa-slider__bullet--border-color_hover: var(--ks-border-color-interface-interactive);
   --dsa-slider__bullet--border-color_active: var(--ks-color-primary);
   --dsa-slider__bullet--size: 1rem;
   --dsa-slider__bullet--background-color: transparent;

package/dist/components/teaser-card/index.js

@@ -22,7 +22,7 @@ const TeaserCardContextDefault = forwardRef(({ headline, text, button, url, imag
                 renderTopic: () => jsx(Fragment, { children: compiler(headline) }), link: {
                     hidden: button?.hidden,
                     label: button.label,
-                    variant: "primary",
+                    variant: "secondary",
                     url: url,
                     icon: button?.chevron ? "chevron-right" : undefined,
                 }, image: image, ref: ref })] }) })));

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

@@ -8,12 +8,11 @@
   --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) var(--ks-border-radius-card)
-    var(--ks-border-radius-card) calc(var(--ks-border-radius-card) * 3);
+  --dsa-teaser-card--border-radius: var(--ks-border-radius-card);
   --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-card__image--transition: transform var(--ks-transition-fade);
   --dsa-teaser-card__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-s);
@@ -24,17 +23,17 @@
   --dsa-teaser-card__label--border-radius: var(--ks-border-radius-pill);
   --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--padding: var(--ks-spacing-inset-stretch-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.5em;
+  --dsa-teaser-card__copy--margin-top: 0.75em;
   --dsa-teaser-card__button--font: var(--ks-font-interface-s);
 }
 @container teaser-card (min-width: 400px) {
   .dsa-teaser-card {
-    --dsa-teaser-card--padding: var(--ks-spacing-inset-l);
+    --dsa-teaser-card--padding: var(--ks-spacing-inset-stretch-l);
     --dsa-teaser-card__topic--font: var(--ks-font-display-l);
     --dsa-teaser-card__copy--font: var(--ks-font-copy-m);
     --dsa-teaser-card__button--font: var(--ks-font-interface-m);
@@ -42,14 +41,16 @@
 }
 @media (min-width: 48em) {
   .dsa-teaser-card {
-    --dsa-teaser-card__topic--font: var(--ks-font-display-m);
-    --dsa-teaser-card__copy--font: var(--ks-font-copy-s);
+    --dsa-teaser-card__topic--font: var(--ks-font-display-s);
+    --dsa-teaser-card__copy--font: var(--ks-font-copy-xs);
     --dsa-teaser-card--padding: var(--ks-spacing-inset-m);
     --dsa-teaser-card__button--font: var(--ks-font-interface-s);
   }
-  @container teaser-card (min-width: 400px) {
+  @container teaser-card (min-width: 300px) {
     .dsa-teaser-card {
+      --dsa-teaser-card__topic--font: var(--ks-font-display-m);
       --dsa-teaser-card__copy--font: var(--ks-font-copy-m);
+      --dsa-teaser-card--padding: var(--ks-spacing-inset-stretch-l);
       --dsa-teaser-card__button--font: var(--ks-font-interface-m);
     }
   }

package/dist/global.css

@@ -293,9 +293,9 @@ h3 {
 }
 :root, [ks-inverted], [ks-theme] {
   --dsa-text-color-on-primary-base: var(--ks-color-fg-inverted);
-  --dsa-text-color-on-primary-inverted-base: var(--ks-color-fg);
+  --dsa-text-color-on-primary-inverted-base: var(--ks-color-fg-inverted);
   --dsa-overlay--background-color: var(--ks-color-fg-alpha-4);
-  --dsa-overlay-box_transparent--background-color: var(--ks-color-bg-alpha-4);
+  --dsa-overlay-box_transparent--background-color: var(--ks-color-bg);
   --dsa-overlay-box_transparent--backdrop-filter: blur(16px);
   --dsa-overlay-box_opaque--background-color: var(--ks-color-bg-alpha-2);
   --dsa-overlay-box_opaque--backdrop-filter: blur(20px);
@@ -305,7 +305,7 @@ h3 {
   --dsa-overlay-text--text-color-base: var(--ks-text-color-display-inverted);
   --dsa-overlay-text--text-color-inverted-base: var(--ks-text-color-display);
   --dsa-topic--font: var(--ks-font-display-m);
-  --dsa-topic--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-topic--font-weight: var(--ks-font-weight-bold);
   --dsa-topic--color: var(--ks-text-color-display);
   --dsa-topic--font-family: var(--ks-font-family-display);
   --dsa-link--font-weight: var(--ks-font-weight-regular);
@@ -351,7 +351,7 @@ h3 {
 [ks-inverted=true] {
   --spacing-base: 18px;
   --spacing-shrink-factor: 0.65;
-  --spacing-grow-factor: 1.325;
+  --spacing-grow-factor: 1.35;
   --spacing-bp-factor: 1.0135;
   --spacing-xxs-bp-factor: calc(1 * var(--spacing-bp-factor));
   --spacing-xs-bp-factor: calc(var(--spacing-xxs-bp-factor) * var(--spacing-bp-factor));
@@ -616,7 +616,7 @@ h3 {
   --dsa-input--font: var(--ks-font-interface-s);
   --dsa-input--background: transparent;
   --dsa-input--background_focus: transparent;
-  --dsa-input--padding: 0.4rem 0.75rem 0.35rem;
+  --dsa-input--padding: 0.75em;
   --dsa-input--shadow_focus: 0 0 0 var(--ks-border-width-emphasized);
   --dsa-input__placeholder--color: var(--ks-color-fg-alpha-5);
 }