@kickstartds/ds-agency-premium 1.6.71--canary.45.1846.0 → 1.7.0--canary.18.1660.0

package/dist/components/providers/index.js

@@ -15,12 +15,12 @@ import '../section/js/Section.client.js';
 import '@kickstartds/core/lib/component';
 import '@kickstartds/base/lib/teaser-box';
 import '@kickstartds/core/lib/container';
-import 'markdown-to-jsx';
 import '@kickstartds/base/lib/picture';
 import '@kickstartds/base/lib/contact';
 import '@kickstartds/base/lib/link';
 import '@kickstartds/base/lib/icon';
 import '@kickstartds/base/lib/rich-text';
+import 'markdown-to-jsx';
 import '@kickstartds/base/lib/headline';
 import '@kickstartds/base/lib/button-group';
 

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-21d04028.js";
+import { SectionProps } from "../../SectionProps-83d399b4.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>>;
 declare const SectionProvider: FC<PropsWithChildren<any>>;
-export type { SectionProps };
 export { SectionContextDefault, SectionContext, Section, SectionProvider };

package/dist/components/section/index.js

@@ -7,7 +7,7 @@ import { SectionContextDefault as SectionContextDefault$1, SectionContext as Sec
 import { identifier } from './js/Section.client.js';
 import '@kickstartds/core/lib/component';
 
-const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", transition, backgroundImage, spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
+const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
     const { large: headlineLarge = false, ...headlineRest } = {
         align: "left",
         ...headline,
@@ -16,15 +16,21 @@ 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--${style}`, transition &&
-            transition !== "none" &&
-            `dsa-section--transition-${transition}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor === "default"
-            ? "default"
-            : backgroundColor === "accent"
-                ? "accent"
-                : backgroundColor === "bold"
-                    ? "bold"
-                    : undefined, backgroundImage: backgroundImage, content: content, headline: {
+    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style &&
+            style !== "default" &&
+            `dsa-section-style--${style === "verticalGradient"
+                ? "vertical-gradient"
+                : style === "horizontalGradient"
+                    ? "horizontal-gradient"
+                    : style === "accentTransition"
+                        ? "accent-transition"
+                        : style === "boldTransition"
+                            ? "bold-transition"
+                            : style === "symmetricGlow"
+                                ? "symmetric-glow"
+                                : style === "anchorGlow"
+                                    ? "anchor-glow"
+                                    : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, content: content, headline: {
             ...headlineRest,
             spaceAfter: "large",
             // @ts-expect-error

package/dist/components/section/js/Section.client.js

@@ -4,7 +4,7 @@ const identifier = "dsa.section";
 class Section extends Component {
     constructor(element) {
         super(element);
-        if (element.classList.contains("dsa-section--spotlight")) {
+        if (element.classList.contains("l-section--spotlight")) {
             import('./spotlight.client.js').then((mod) => {
                 const cleanup = mod.initSpotlight(element);
                 this.onDisconnect(cleanup);

package/dist/components/section/section.css

@@ -1,71 +1,98 @@
-.l-container--section {
-  /* stylelint-disable-next-line property-no-unknown */
-  container-name: section;
-}
-
 .dsa-section {
-  --dsa-section__col--repeat: auto-fit;
+  --dsa-section__col--min-width: var(--dsa-section_tile-width--default);
   --dsa-section__col--max-width: 1fr;
-  --dsa-section__col--min-width_smallest: var(--dsa-tile--width_smallest);
-  --dsa-section__col--min-width_small: var(--dsa-tile--width_small);
-  --dsa-section__col--min-width_medium: var(--dsa-tile--width_medium);
-  --dsa-section__col--min-width_large: var(--dsa-tile--width_large);
-  --dsa-section__col--min-width_largest: var(--dsa-tile--width_largest);
-  --dsa-section--space_default: var(--dsa-content--vertical-spacing);
+  --dsa-section__col--repeat: auto-fit;
+  --dsa-section--space_default: var(--ks-spacing-xxl);
   --dsa-section--space_small: calc(var(--ks-spacing-xxl) / 2);
-  --dsa-section--gutter_small: var(--ks-spacing-s);
+  --dsa-section__tile--width_smallest: 14rem;
+  --dsa-section__tile--width_default: 18rem;
+  --dsa-section__tile--width_medium: var(--l-section--content-width-narrow);
+  --dsa-section__tile--width_large: var(--l-section--content-width-default);
+  --dsa-section__tile--width_largest: var(--l-section--content-width-wide);
+  --dsa-section--gutter_small: var(--ks-spacing-xs);
   --dsa-section--gutter_default: var(--ks-spacing-m);
-  --dsa-section--gutter_large: var(--ks-spacing-l);
+  --dsa-section--gutter_large: var(--ks-spacing-xl);
   --dsa-section__buttons--space-before: var(--ks-spacing-stack-m);
-  --dsa-section__content--width_narrow: var(--dsa-content--width_narrow);
-  --dsa-section__content--width_default: var(--dsa-content--width_default);
-  --dsa-section__content--width_wide: var(--dsa-content--width_wide);
+  --dsa-section__content--width_narrow: 46.5rem;
+  --dsa-section__content--width_default: 62rem;
+  --dsa-section__content--width_wide: 75rem;
   --dsa-section__content--width_max: 100vw;
   --dsa-section__content--width_full: 100vw;
-  --dsa-section__content--padding: var(--dsa-content--horizontal-spacing);
+  --dsa-section__content--padding: var(--dsa-content--spacing);
   --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-inverted: linear-gradient(
-    178deg,
-    transparent 75%,
-    var(--ks-background-color-default-inverted) 75%
-  );
   --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
+  --dsa-section__slider-arrow--background-color: transparent;
   --dsa-section__slider-arrow--size: 2rem;
   --dsa-section__slider-arrow--padding: 0.5em;
   --dsa-section__slider-arrow--opacity: 0.6;
   --dsa-section__slider-arrow--opacity_hover: 1;
   --dsa-section__slider-arrow--opacity_disabled: 0.3;
   --dsa-section__slider-arrow--background: transparent;
-  --dsa-section__spotlight--size: 50px;
-  --dsa-section__spotlight--blur: 0%;
+  --dsa-section_stagelights--background-image: radial-gradient(
+      50% 150% at 100% -50%,
+      var(--ks-color-primary-inverted-alpha-3) 0%,
+      transparent 100%
+    ),
+    radial-gradient(50% 150% at 0% -50%, var(--ks-color-primary-alpha-3) 0%, transparent 100%);
+  --dsa-section_anchor-glow--background-image: radial-gradient(
+    50% 50% at 50% 100%,
+    var(--ks-color-secondary-alpha-5) 0%,
+    transparent 100%
+  );
+  --dsa-section_symmetric-glow--background-image: radial-gradient(
+      20% 50% at 100% 50%,
+      var(--ks-color-primary-alpha-5) 0%,
+      transparent 100%
+    ),
+    radial-gradient(20% 50% at 0% 50%, var(--ks-color-primary-inverted-alpha-5) 0%, transparent 100%);
+  --dsa-section_accent-transition--background-image: linear-gradient(
+    180deg,
+    transparent 0%,
+    var(--ks-background-color-accent) 100%
+  );
+  --dsa-section_bold-transition--background-image: linear-gradient(
+    180deg,
+    transparent 0%,
+    var(--ks-background-color-bold) 100%
+  );
+  --dsa-section_vertical-gradient--background-image: linear-gradient(
+    0deg,
+    var(--ks-color-primary-alpha-5) 0%,
+    var(--ks-color-secondary-alpha-5) 100%
+  );
+  --dsa-section_horizontal-gradient--background-image: linear-gradient(
+    90deg,
+    var(--ks-color-primary-alpha-5) 0%,
+    var(--ks-color-secondary-alpha-5) 100%
+  );
+  --dsa-section__spotlight--size: 150px;
+  --dsa-section__spotlight--blur: 100%;
   --dsa-section__spotlight--color: var(--ks-color-primary-alpha-5);
 }
 
 .l-section.dsa-section {
-  --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
-  --l-section--background-default: var(--dsa-section--background-color_default, var(--ks-background-color-default));
-  --l-section--background-accent: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
-  --l-section--background-bold: var(--dsa-section--background-color_bold, var(--ks-background-color-primary));
+  --l-section--gutter: var(--dsa-section--gutter_default);
   --l-section_col--min-width: var(--dsa-section__col--min-width, var(--l-section_tile-width--default));
-  --l-section_col--max-width: var(--dsa-section__col--max-width, 1fr);
+  --l-section_col--max-width: var(--dsa-section__col--min-width, 1fr);
   --l-section_col--repeat: var(--dsa-section__col--repeat, auto-fit);
-  --l-section--content-width-narrow: var(--dsa-section__content--width_narrow, var(--dsa-content--width_narrow));
-  --l-section--content-width-default: var(--dsa-section__content--width_default, var(--dsa-content--width_default));
-  --l-section--content-width-wide: var(--dsa-section__content--width_wide, var(--dsa-content--width_wide));
-  --l-section--content-width-max: var(--dsa-section__content--width_max, var(--dsa-content--width_max));
-  --l-section--content-width-full: var(--dsa-section__content--width_full, var(--dsa-content--width_full));
+  --l-section_tile-width--smallest: var(--dsa-section__tile--width_smallest, 14rem);
+  --l-section_tile-width--default: var(--dsa-section__tile--width_default, 18rem);
+  --l-section_tile-width--medium: var(--dsa-section__tile--width_medium, var(--l-section--content-width-narrow));
+  --l-section_tile-width--large: var(--dsa-section__tile--width_large, var(--l-section--content-width-default));
+  --l-section_tile-width--largest: var(--dsa-section__tile--width_largest, var(--l-section--content-width-wide));
+  --l-section--content-width-narrow: var(--dsa-section__content--width_narrow, 46.5rem);
+  --l-section--content-width-default: var(--dsa-section__content--width_default, 62rem);
+  --l-section--content-width-wide: var(--dsa-section__content--width_wide, 75rem);
+  --l-section--content-width-max: var(--dsa-section__content--width_max, 120rem);
+  --l-section--content-width-full: var(--dsa-section__content--width_full, 120rem);
   --l-section--content-padding: var(--dsa-section__content--padding, var(--ks-spacing-m));
-  --l-section--gutter: var(--dsa-section--gutter_default);
-  --dsa-section--gutter_none: 0;
+  --l-section--background-default: var(--dsa-section--background-color_default, var(--ks-background-color-default));
+  --l-section--background-accent: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
+  --l-section--background-bold: var(--dsa-section--background-color_bold, var(--ks-background-color-primary));
+  --l-section--space-default: var(--dsa-section--space_default, var(--ks-spacing-xxl));
+  --l-section--space-small: var(--dsa-section--space_small, calc(var(--l-section--space-default) / 2));
   --l-section--gutter-small: var(--dsa-section--gutter_small, var(--ks-spacing-xs));
   --l-section--gutter-default: var(--dsa-section--gutter_default, var(--ks-spacing-m));
   --l-section--gutter-large: var(--dsa-section--gutter_large, var(--ks-spacing-xl));
@@ -73,20 +100,12 @@
   --l-section_slider-arrow--padding: var(--dsa-section__slider-arrow--padding, var(--ks-spacing-xs));
   --l-section_slider-arrow--color: var(--dsa-section__slider-arrow--color, var(--ks-text-color-interface-interactive));
   --l-section_slider-arrow--opacity: var(--dsa-section__slider-arrow--opacity, 0.6);
-  --l-section_slider-arrow--opacity_hover: var(--dsa-section__slider-arrow--opacity_hover, 0.9);
+  --l-section_slider-arrow--opacity_hover: var(--dsa-section__slider-arrow--opcaity_hover, 0.9);
   --l-section_slider-arrow--opacity_disabled: var(--dsa-section__slider-arrow--opacity_disabled, 0.3);
   --l-section_slider-arrow--background: var(--dsa-section__slider-arrow--background, transparent);
-  --l-section--space-default: var(--dsa-section--space_default, var(--ks-spacing-xxl));
-  --l-section--space-small: var(--dsa-section--space_small, calc(var(--l-section--space-default) / 2));
-}
-
-.l-section.dsa-section {
   background-image: var(--dsa-section--background-image);
-  background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
   position: relative;
-}
-.l-section.dsa-section .l-section__container {
-  font: var(--ks-font-copy-m);
+  background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
 }
 .l-section.dsa-section.l-section--gutter-large {
   --l-section--gutter: var(--dsa-section--gutter_large);
@@ -103,18 +122,6 @@
 .l-section.dsa-section.l-section--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%));
-}
-.l-section.dsa-section.dsa-section--transition-to-bold {
-  background-image: var(--dsa-section--transition_to-bold, linear-gradient(180deg, transparent 0%, var(--ks-background-color-bold) 100%));
-}
-.l-section.dsa-section.dsa-section--transition-to-default {
-  background-image: var(--dsa-section--transition_to-default, linear-gradient(180deg, transparent 0%, var(--ks-background-color-default) 100%));
-}
-.l-section.dsa-section.dsa-section--transition-to-inverted {
-  background-image: var(--dsa-section--transition_to-inverted, linear-gradient(180deg, transparent 80%, var(--ks-background-color-default-inverted) 80%));
-}
 .l-section.dsa-section--header-spacing {
   padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space_default));
 }
@@ -124,31 +131,34 @@
 .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--framed {
-  background-color: var(--ks-background-color-accent);
+.l-section.dsa-section-style--stagelights {
+  background-image: var(--dsa-section_stagelights--background-image, radial-gradient(50% 150% at 100% -50%, var(--ks-color-primary-inverted-alpha-3) 0%, transparent 100%), radial-gradient(50% 150% at 0% -50%, var(--ks-color-primary-alpha-3) 0%, transparent 100%));
 }
-.l-section.dsa-section-style--framed .l-section__container--content .l-section__content {
-  padding: var(--dsa-section--space_default);
-  background-color: var(--ks-background-color-default);
-  border-radius: var(--ks-border-radius-surface);
+.l-section.dsa-section-style--anchor-glow {
+  background-image: var(--dsa-section_anchor-glow--background-image, radial-gradient(50% 50% at 50% 100%, var(--ks-color-secondary-alpha-5) 0%, transparent 100%));
 }
-.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--symmetric-glow {
+  background-image: var(--dsa-section_symmetric-glow--background-image, radial-gradient(20% 50% at 100% 50%, var(--ks-color-primary-alpha-5) 0%, transparent 100%), radial-gradient(20% 50% at 0% 50%, var(--ks-color-primary-inverted-alpha-5) 0%, transparent 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--accent-transition {
+  background-image: var(--dsa-section_accent-transition--background-image, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
 }
-.l-section.dsa-section--spotlight {
-  position: relative;
+.l-section.dsa-section-style--bold-transition {
+  background-image: var(--dsa-section_bold-transition--background-image, linear-gradient(180deg, transparent 0%, var(--ks-background-color-bold) 100%));
+}
+.l-section.dsa-section-style--vertical-gradient {
+  background-image: var(--dsa-section_vertical-gradient--background-image, linear-gradient(0deg, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-secondary-alpha-5) 100%));
 }
-.l-section.dsa-section--spotlight .l-section__container {
+.l-section.dsa-section-style--horizontal-gradient {
+  background-image: var(--dsa-section_horizontal-gradient--background-image, linear-gradient(90deg, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-secondary-alpha-5) 100%));
+}
+.l-section.dsa-section--spotlight {
   position: relative;
-  z-index: 1;
 }
-.l-section.dsa-section--spotlight:hover::after {
+.l-section.dsa-section--spotlight:hover::before {
   opacity: 1;
 }
-.l-section.dsa-section--spotlight::after {
+.l-section.dsa-section--spotlight::before {
   transition: opacity var(--ks-transition-fade);
   opacity: 0;
   top: 0;
@@ -157,14 +167,9 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  background-image: radial-gradient(var(--dsa-section__spotlight--size) circle at var(--dsa-section__spotlight--left) var(--dsa-section__spotlight--top), var(--dsa-section__spotlight--color) 0%, var(--dsa-section__spotlight--color) calc(100% - var(--dsa-section__spotlight--blur)), transparent 100%, transparent 100%);
+  background-image: radial-gradient(var(--dsa-section__spotlight--size) circle, var(--dsa-section__spotlight--color) 0%, var(--dsa-section__spotlight--color) calc(100% - var(--dsa-section__spotlight--blur)), transparent 100%, transparent 100%);
 }
 .l-section.dsa-section .l-section__content {
-  --l-section_tile-width--smallest: var(--dsa-section__col--min-width_smallest, var(--dsa-tile--width_smallest));
-  --l-section_tile-width--default: var(--dsa-section__col--min-width_small, var(--dsa-tile--width_small));
-  --l-section_tile-width--medium: var(--dsa-section__col--min-width_medium, var(--dsa-tile--width_medium));
-  --l-section_tile-width--large: var(--dsa-section__col--min-width_large, var(--dsa-tile--width_large));
-  --l-section_tile-width--largest: var(--dsa-section__col--min-width_largest, var(--dsa-tile--width_largest));
   --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
 }
 .l-section.dsa-section .l-section__content--slider {