@kickstartds/ds-agency-premium 1.6.71--canary.55.2416.0 → 1.6.72--canary.43.2474.0

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

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

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

@@ -8,6 +8,13 @@
   --dsa-business-card--padding: var(--ks-spacing-inset-m);
   --dsa-business-card--background-color: var(--ks-background-color-card);
   --dsa-business-card--gap: var(--ks-spacing-stack-l);
+}
+@container business-card (min-width: 640px) {
+  .dsa-business-card {
+    --dsa-business-card--padding: var(--ks-spacing-inset-xl);
+  }
+}
+.dsa-business-card {
   --dsa-business-card__image--aspect-ratio: 16 / 9;
   --dsa-business-card__image--border-radius: var(--ks-border-radius-card);
   --dsa-business-card__topic--font: var(--dsa-topic--font);
@@ -28,11 +35,6 @@
   --dsa-business-card__contact--color: var(--ks-text-color-interface-interactive);
   --dsa-business-card__contact--color_hover: var(--ks-text-color-interface-interactive-hover);
 }
-@container business-card (min-width: 640px) {
-  .dsa-business-card {
-    --dsa-business-card--padding: var(--ks-spacing-inset-xl);
-  }
-}
 
 .l-container--business-card {
   /* stylelint-disable-next-line property-no-unknown */

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

@@ -20,7 +20,7 @@ const defaults = {
     "buttons": []
 };
 
-const BusinessCardContextDefault = forwardRef(({ centered, image, logo, topic, address, avatar, contact, buttons }, ref) => (jsx(Container, { name: "business-card", children: jsxs("div", { className: classnames("dsa-business-card", centered && "dsa-business-card--centered"), ref: ref, children: [image && (jsx("div", { className: "dsa-business-card__image", children: jsx(Picture, { src: image.src, alt: image.alt }) })), jsxs("div", { className: "dsa-business-card__content", children: [logo && (jsx(Fragment, { children: logo.url ? (jsx(Link, { href: logo.url, className: "dsa-business-card__logo dsa-business-card__logo-link", children: jsx(Picture, { src: logo.src, alt: logo.alt }) })) : (jsx(Picture, { className: "dsa-business-card__logo", src: logo.src, alt: logo.alt })) })), jsxs("address", { className: classnames("dsa-business-card__address", centered && "dsa-business-card__address--centered"), children: [jsxs("div", { className: "dsa-business-card__infos", children: [topic && (jsx("div", { className: "dsa-business-card__topic", children: jsx("span", { children: topic }) })), jsx(Markdown, { className: "dsa-business-card__location", children: address })] }), jsxs("div", { className: "dsa-business-card__contact", children: [avatar && (jsx(Picture, { className: "dsa-business-card__avatar", src: avatar?.src, alt: avatar?.alt })), contact && (jsx("div", { className: "dsa-business-card__contact-items", children: contact.map((item, index) => (jsx(Fragment, { children: jsxs(Link, { href: item?.url, className: "dsa-business-card__contact-item", children: [item?.icon && jsx(Icon, { icon: item?.icon }), jsx("span", { children: item.label })] }, index) }))) }))] })] }), buttons && buttons.length > 0 && (jsx("div", { className: "dsa-business-card__buttons", children: buttons.map((button, index) => (jsx(Button, { label: button.label, url: button.url, className: "dsa-business-card__button", variant: "primary" }, index))) }))] })] }) })));
+const BusinessCardContextDefault = forwardRef(({ centered, image, logo, topic, address, avatar, contact, buttons }, ref) => (jsx(Container, { name: "business-card", children: jsxs("div", { className: classnames("dsa-business-card", centered && "dsa-business-card--centered"), ref: ref, children: [image.src && (jsx("div", { className: "dsa-business-card__image", children: jsx(Picture, { src: image.src, alt: image.alt }) })), jsxs("div", { className: "dsa-business-card__content", children: [logo && (jsx(Fragment, { children: logo.url ? (jsx(Link, { href: logo.url, className: "dsa-business-card__logo dsa-business-card__logo-link", children: jsx(Picture, { src: logo.src, alt: logo.alt }) })) : (jsx(Picture, { className: "dsa-business-card__logo", src: logo.src, alt: logo.alt })) })), jsxs("address", { className: classnames("dsa-business-card__address", centered && "dsa-business-card__address--centered"), children: [jsxs("div", { className: "dsa-business-card__infos", children: [topic && (jsx("div", { className: "dsa-business-card__topic", children: jsx("span", { children: topic }) })), jsx(Markdown, { className: "dsa-business-card__location", children: address })] }), jsxs("div", { className: "dsa-business-card__contact", children: [avatar && (jsx(Picture, { className: "dsa-business-card__avatar", src: avatar?.src, alt: avatar?.alt })), contact && (jsx("div", { className: "dsa-business-card__contact-items", children: contact.map((item, index) => (jsx(Fragment, { children: jsxs(Link, { href: item?.url, className: "dsa-business-card__contact-item", children: [item?.icon && jsx(Icon, { icon: item?.icon }), jsx("span", { children: item.label })] }, index) }))) }))] })] }), buttons && buttons.length > 0 && (jsx("div", { className: "dsa-business-card__buttons", children: buttons.map((button, index) => (jsx(Button, { label: button.label, url: button.url, className: "dsa-business-card__button", variant: "primary" }, index))) }))] })] }) })));
 const BusinessCardContext = createContext(BusinessCardContextDefault);
 const BusinessCard = forwardRef((props, ref) => {
     const Component = useContext(BusinessCardContext);

package/dist/components/button/button.css

@@ -35,7 +35,9 @@
   --c-button--font-weight: var(--dsa-button--font-weight, var(--ks-font-weight-semi-bold));
   --c-button--border-width: var(--dsa-button--border-width, var(--ks-border-width-default));
   text-transform: var(--dsa-button--text-transform);
-  transition-property: box-shadow, transform, background-color, color, border;
+}
+.dsa-button.c-button .icon {
+  margin-left: var(--ks-spacing-xxs);
 }
 .dsa-button.c-button.c-button--small {
   --c-button--font: var(--dsa-button_small--font, var(--ks-font-interface-s));
@@ -120,6 +122,9 @@
   --c-button--background-color-active: var(--dsa-button_terciary--background-color_active, none);
   --c-button--background-color-selected: var(--dsa-button_terciary--background-color_selected, none);
 }
+.dsa-button.c-button {
+  transition-property: box-shadow, transform, background-color, color, border;
+}
 .dsa-button.c-button:disabled {
   pointer-events: none;
 }

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

@@ -1,75 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-/* 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.
- */
-/**
- * URL of the image to display
- */
-type ImageSource = string;
-/**
- * Alt text of the image
- */
-type AltText = string;
-/**
- * Image uses all the horizontal space vailable
- */
-type FullWidth = boolean;
-/**
- * Aspect Ratio of the Images
- */
-type AspectRatio = "wide" | "square" | "vertical";
-/**
- * Name, company name, etc.
- */
-type Title = string;
-/**
- * Position, profession, department, location, etc.
- */
-type Subtitle = string;
-/**
- * Open link in new Tab
- */
-type OpenLinkInNewTab = boolean;
-/**
- * Aria label for the link
- */
-type AriaLabel = string;
-type CopyText = string;
-/**
- * Additional css classes attached to the wrapping element
- */
-type Class = string;
-/**
- * Optional custom component identifier
- */
-type KsComponentAttribute = string;
-/**
- * Component used for user interaction
- */
-interface ContactProps {
-    image?: {
-        src?: ImageSource;
-        alt?: AltText;
-        fullWidth?: FullWidth;
-        aspectRatio?: AspectRatio;
-    };
-    title?: Title;
-    subtitle?: Subtitle;
-    links?: {
-        icon?: string;
-        label?: string;
-        url?: string;
-        newTab?: OpenLinkInNewTab;
-        ariaLabel?: AriaLabel;
-    }[];
-    copy?: CopyText;
-    className?: Class;
-    component?: KsComponentAttribute;
-}
+import { ContactProps } from "../../ContactProps-7cac90e5.js";
 declare const ContactContextDefault: import("react").ForwardRefExoticComponent<ContactProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
 declare const ContactContext: import("react").Context<import("react").ForwardRefExoticComponent<ContactProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>>;
 declare const Contact: import("react").ForwardRefExoticComponent<ContactProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -12,6 +12,7 @@
   --dsa-content-nav__link--color_hover: var(--ks-text-color-interface-interactive-hover);
   --dsa-content-nav__link--icon-size: 1.25em;
   --dsa-content-nav__toggle-more--font: var(--ks-font-interface-m);
+  --dsa-content-nav__toggle-more--font-weight: var(--dsa-link--font-weight);
   --dsa-content-nav__toggle-more--color: var(--dsa-link--color);
   --dsa-content-nav__toggle-more--margin-top: var(--ks-spacing-stack-xs);
 }
@@ -94,6 +95,7 @@
   color: var(--dsa-content-nav__toggle-more--color, var(--dsa-link--color));
   cursor: pointer;
   font: var(--dsa-content-nav__toggle-more--font, var(--ks-font-interface-m));
+  font-weight: var(--dsa-content-nav__toggle-more--font-weight, var(--dsa-link--font-weight));
   display: flex;
   align-items: center;
   gap: calc(var(--ks-spacing-xxs) * 0.25);

package/dist/components/cookie-consent/C15t.client.js

@@ -1,6 +1,61 @@
 import { define } from '@kickstartds/core/lib/component';
+import 'c15t';
 import CookieConsent from './CookieConsent.client.js';
 
+const customTranslations = {
+    de: {
+        accept: "Akzeptieren",
+        reject: "Ablehnen",
+        required: "Immer aktiv",
+        settings: "Cookies verwalten",
+    },
+    en: {
+        accept: "Accept",
+        reject: "Reject",
+        required: "Always Active",
+        settings: "Cookie Preferences",
+    },
+};
+const translate = (elements, translationConfig) => {
+    const defaultLanguage = translationConfig.defaultLanguage;
+    const translations = translationConfig.translations[defaultLanguage];
+    const customTranslation = customTranslations[defaultLanguage] || customTranslations.en;
+    // Notice
+    elements.notice.title.textContent = translations.cookieBanner.title;
+    elements.notice.description.textContent =
+        translations.cookieBanner.description;
+    elements.notice.customizeBtn.textContent = translations.common.customize;
+    elements.notice.rejectAllBtn.textContent = translations.common.rejectAll;
+    elements.notice.acceptAllBtn.textContent = translations.common.acceptAll;
+    // Dialog
+    elements.dialog.title.textContent = translations.consentManagerDialog.title;
+    elements.dialog.description.textContent =
+        translations.consentManagerDialog.description;
+    elements.dialog.activateAllBtn.textContent = translations.common.acceptAll;
+    elements.dialog.deactivateAllBtn.textContent = translations.common.rejectAll;
+    elements.dialog.saveBtn.textContent = translations.common.save;
+    for (const option of elements.dialog.form.querySelectorAll(".dsa-cookie-consent-dialogue__option")) {
+        const type = option.dataset.consentType;
+        const translation = translations.consentTypes[type];
+        if (translation) {
+            option.querySelector(".dsa-headline__inner").textContent =
+                translation.title;
+            option.querySelector(".dsa-cookie-consent-dialogue__option-description").textContent = translation.description;
+        }
+        const requiredLabel = option.querySelector(".dsa-cookie-consent-dialogue__label");
+        if (requiredLabel)
+            requiredLabel.textContent = customTranslation.required;
+    }
+    for (const element of elements.dialog.form.elements) {
+        if (element.type === "radio") {
+            element.nextElementSibling.nextElementSibling.textContent =
+                customTranslation[element.value];
+        }
+    }
+    // settings
+    elements.settings.button.firstElementChild.textContent =
+        customTranslation.settings;
+};
 class CookieConsentC15t extends CookieConsent {
     constructor(element) {
         super(element);
@@ -31,7 +86,8 @@ class CookieConsentC15t extends CookieConsent {
             }
         };
         const unsub = store.subscribe(update);
-        update(store.getState());
+        translate(this.elements, initialState.translationConfig);
+        update(initialState);
         const acceptCustom = () => {
             const state = store.getState();
             const consentTypes = state.getDisplayedConsents();

package/dist/components/cookie-consent/CookieConsent.client.d.ts

@@ -4,17 +4,21 @@ declare class CookieConsent {
     elements: {
         notice: {
             wrapper: any;
+            title: any;
+            description: any;
             customizeBtn: any;
             rejectAllBtn: any;
             acceptAllBtn: any;
         };
         dialog: {
             wrapper: any;
-            overlay: any;
+            title: any;
+            description: any;
             closeBtn: any;
             form: any;
             activateAllBtn: any;
             deactivateAllBtn: any;
+            saveBtn: any;
         };
         settings: {
             button: any;

package/dist/components/cookie-consent/CookieConsent.client.js

@@ -7,36 +7,40 @@ class CookieConsent extends Component {
         const elements = (this.elements = {
             notice: {
                 wrapper: $(".dsa-cookie-consent-notice"),
+                title: $(".dsa-cookie-consent-notice__title .dsa-headline__inner"),
+                description: $(".dsa-cookie-consent-notice__description"),
                 customizeBtn: $(".dsa-cookie-consent-notice__button--customize"),
                 rejectAllBtn: $(".dsa-cookie-consent-notice__button--reject"),
                 acceptAllBtn: $(".dsa-cookie-consent-notice__button--accept"),
             },
             dialog: {
                 wrapper: $(".dsa-cookie-consent-dialogue"),
-                overlay: $(".dsa-cookie-consent-overlay"),
+                title: $(".dsa-cookie-consent-dialogue__title .dsa-headline__inner"),
+                description: $(".dsa-cookie-consent-dialogue__description"),
                 closeBtn: $(".dsa-cookie-consent-dialogue__close"),
                 form: $(".dsa-cookie-consent-dialogue__form"),
                 activateAllBtn: $(".dsa-cookie-consent-dialogue__button--activate-all"),
                 deactivateAllBtn: $(".dsa-cookie-consent-dialogue__button--deactivate-all"),
+                saveBtn: $(".dsa-cookie-consent-dialogue__button--save"),
             },
             settings: {
                 button: $(".dsa-cookie-consent-revisit"),
             },
         });
         const showDialog = () => {
-            elements.dialog.overlay.removeAttribute("hidden");
-            elements.dialog.wrapper.removeAttribute("hidden");
-            elements.dialog.wrapper.setAttribute("aria-hidden", "false");
+            elements.dialog.wrapper.showModal();
         };
         const closeDialog = () => {
-            elements.dialog.overlay.setAttribute("hidden", "");
-            elements.dialog.wrapper.setAttribute("hidden", "");
-            elements.dialog.wrapper.setAttribute("aria-hidden", "true");
+            elements.dialog.wrapper.close();
         };
         const closeDialogAndReset = () => {
             closeDialog();
             elements.dialog.form.reset();
         };
+        const onBackdropClick = (event) => {
+            if (event.target === elements.dialog.wrapper)
+                closeDialogAndReset();
+        };
         const activateAll = () => {
             for (const element of elements.dialog.form.elements) {
                 if (element.value === "accept") {
@@ -51,16 +55,12 @@ class CookieConsent extends Component {
                 }
             }
         };
-        const onSubmit = (event) => {
-            event.preventDefault();
-            closeDialog();
-        };
         elements.notice.customizeBtn.addEventListener("click", showDialog);
         elements.settings.button.addEventListener("click", showDialog);
         elements.dialog.closeBtn.addEventListener("click", closeDialogAndReset);
         elements.dialog.activateAllBtn.addEventListener("click", activateAll);
         elements.dialog.deactivateAllBtn.addEventListener("click", deactivateAll);
-        elements.dialog.form.addEventListener("submit", onSubmit);
+        elements.dialog.wrapper.addEventListener("click", onBackdropClick);
         window._ks.radio.on(CookieConsent.identifier + ".showNotice", (_, value) => {
             this.showNotice = value;
         });
@@ -70,7 +70,7 @@ class CookieConsent extends Component {
             elements.dialog.closeBtn.removeEventListener("click", closeDialogAndReset);
             elements.dialog.activateAllBtn.removeEventListener("click", activateAll);
             elements.dialog.deactivateAllBtn.removeEventListener("click", deactivateAll);
-            elements.dialog.form.removeEventListener("submit", onSubmit);
+            elements.dialog.wrapper.removeEventListener("click", onBackdropClick);
         });
     }
     set showNotice(value) {

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

@@ -26,6 +26,13 @@
   --dsa-cookie-consent-dialogue--background-color: var(--ks-background-color-default);
   --dsa-cookie-consent-dialogue--max-width: var(--dsa-tile--width_largest);
   --dsa-cookie-consent-dialogue--max-height: 100%;
+}
+@media (min-width: 48em) {
+  .dsa-cookie-consent {
+    --dsa-cookie-consent-dialogue--max-height: 90vh;
+  }
+}
+.dsa-cookie-consent {
   --dsa-cookie-consent-dialogue--spacing-vertical: var(--ks-spacing-inset-s);
   --dsa-cookie-consent-dialogue--spacing-horizontal: var(--ks-spacing-inset-s);
   --dsa-cookie-consent-dialogue__block--padding-vertical: var(--ks-spacing-inset-m);
@@ -35,8 +42,8 @@
   --dsa-cookie-consent-dialogue__close--padding: var(--ks-spacing-inset-xs);
   --dsa-cookie-consent-dialogue__close--color: var(--ks-text-color-interface-interactive);
   --dsa-cookie-consent-dialogue__close--color_hover: var(--ks-text-color-interface-interactive);
-  --dsa-cookie-consent-dialogue__close--background-color_hover: var(--ks-color-fg-alpha-8);
   --dsa-cookie-consent-dialogue__close--background-color: transparent;
+  --dsa-cookie-consent-dialogue__close--background-color_hover: var(--ks-color-fg-alpha-8);
   --dsa-cookie-consent-dialogue__description--border-bottom: 1px solid var(--ks-border-color-interface);
   --dsa-cookie-consent-dialogue__description--font: var(--ks-font-interface-s);
   --dsa-cookie-consent-dialogue__description--color: var(--ks-text-color-interface);
@@ -50,11 +57,6 @@
   --dsa-cookie-consent-dialogue__buttons--gap: var(--ks-spacing-stack-xs) var(--ks-spacing-inline-s);
   --dsa-cookie-consent-overlay--background-color: var(--dsa-overlay--background-color);
 }
-@media (min-width: 48em) {
-  .dsa-cookie-consent {
-    --dsa-cookie-consent-dialogue--max-height: 90vh;
-  }
-}
 
 .dsa-cookie-consent-notice {
   display: flex;
@@ -75,7 +77,6 @@
 @media (min-width: 48em) {
   .dsa-cookie-consent-notice--card {
     border: var(--dsa-cookie-consent-notice_card--border, var(--ks-border-color-card) solid var(--ks-border-width-default));
-    border-radius: var(--dsa-cookie-consent-notice_card--border-radius, var(--ks-border-radius-card));
     max-width: var(--dsa-cookie-consent-notice_card--max-width, var(--dsa-tile--width_large));
     bottom: var(--dsa-cookie-consent-notice_card--bottom, var(--ks-spacing-m));
     left: var(--dsa-cookie-consent-notice_card--left, var(--ks-spacing-m));
@@ -144,20 +145,16 @@
   left: 0;
 }
 
-.dsa-cookie-consent-dialogue {
+.dsa-cookie-consent-dialogue[open] {
   border-radius: var(--dsa-cookie-consent-dialogue--border-radius, var(--ks-border-radius-card));
   border: var(--dsa-cookie-consent-dialogue--border, var(--ks-border-color-interface) solid var(--ks-border-width-default));
   box-shadow: var(--dsa-cookie-consent-dialogue--box-shadow, var(--ks-box-shadow-card));
   background-color: var(--dsa-cookie-consent-dialogue--background-color, var(--ks-background-color-default));
   display: flex;
   flex-direction: column;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  padding: 0;
   width: calc(100% - var(--dsa-cookie-consent-dialogue--spacing-horizontal, var(--ks-spacing-inset-xs)) * 2);
   max-width: var(--dsa-cookie-consent-dialogue--max-width, var(--dsa-tile--width_largest));
-  z-index: 1000;
   max-height: calc(var(--dsa-cookie-consent-dialogue--max-height, 100%) - var(--dsa-cookie-consent-dialogue--spacing-vertical, var(--ks-spacing-inset-xs)) * 2);
 }
 .dsa-cookie-consent-dialogue__header {
@@ -170,9 +167,9 @@
   justify-content: space-between;
   gap: var(--dsa-cookie-consent-dialogue__header--gap, var(--ks-spacing-inline-m));
 }
-.dsa-cookie-consent-dialogue__close {
+.dsa-cookie-consent-dialogue__close.dsa-button {
   --dsa-button--padding: var(--dsa-cookie-consent-dialogue__close--padding, var(--ks-spacing-inset-xs));
-  margin: calc(var(--dsa-cookie-consent-dialogue__close--padding, var(--ks-spacing-inset-xs)) * -1);
+  --dsa-button_secondary--background-color: var(--dsa-cookie-consent-dialogue__close--background-color, transparent);
   --dsa-button_secondary--color: var(
     --dsa-cookie-consent-dialogue__close--color,
     var(--ks-text-color-interface-interactive)
@@ -185,8 +182,11 @@
     --dsa-cookie-consent-dialogue__close--background-color_hover,
     var(--ks-color-fg-alpha-8)
   );
+  margin: calc(var(--dsa-cookie-consent-dialogue__close--padding, var(--ks-spacing-inset-xs)) * -1);
   border-radius: var(--ks-border-radius-circle);
-  background-color: var(--dsa-cookie-consent-dialogue__close--background-color, transparent);
+}
+.dsa-cookie-consent-dialogue__close.dsa-button .icon {
+  margin-left: 0;
 }
 .dsa-cookie-consent-dialogue__form {
   flex: 1;
@@ -254,14 +254,6 @@
     flex-direction: row;
   }
 }
-
-.dsa-cookie-consent-overlay {
-  content: "";
-  position: absolute;
-  top: 0%;
-  left: 0%;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
+.dsa-cookie-consent-dialogue::backdrop {
   background-color: var(--dsa-cookie-consent-overlay--background-color, var(--dsa-overlay--background-color));
 }

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

@@ -14,7 +14,7 @@ import '@kickstartds/base/lib/button';
 import '@kickstartds/core/lib/component';
 
 const CookieConsentContextDefault = forwardRef(({ notice, revisitButton, dialogue, component = "dsa.cookie-consent" }, ref) => {
-    return (jsxs("div", { className: "dsa-cookie-consent", "ks-component": component, ref: ref, children: [jsxs("div", { className: classnames(`dsa-cookie-consent-notice dsa-cookie-consent-notice--${notice?.displayMode}`), hidden: true, children: [jsx(Headline, { spaceAfter: "minimum", text: notice?.title, level: "h2", style: "h3" }), 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, 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" }), 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", 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", 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" })] })] })] }), jsx("div", { className: "dsa-cookie-consent-overlay", hidden: true })] }));
+    return (jsxs("div", { className: "dsa-cookie-consent", "ks-component": component, ref: ref, children: [jsxs("div", { className: classnames(`dsa-cookie-consent-notice dsa-cookie-consent-notice--${notice?.displayMode}`), hidden: true, children: [jsx(Headline, { spaceAfter: "minimum", text: notice?.title, level: "h2", style: "h3", className: "dsa-cookie-consent-notice__title" }), jsx(RichText, { text: notice?.description, className: "dsa-cookie-consent-notice__description" }), jsxs("div", { className: "dsa-cookie-consent-notice__buttons", children: [jsx(Button, { size: "small", label: notice?.customizeButton?.label, variant: notice?.customizeButton?.variant, className: "dsa-cookie-consent-notice__button--customize" }), jsx(Button, { size: "small", label: notice?.rejectButton?.label, variant: notice?.decisionButtonVariant, className: "dsa-cookie-consent-notice__button--reject" }), jsx(Button, { size: "small", label: notice?.acceptButton?.label, variant: notice?.decisionButtonVariant, className: "dsa-cookie-consent-notice__button--accept" })] })] }), jsx(Button, { className: "dsa-cookie-consent-revisit", size: "small", variant: "primary", icon: "star", label: revisitButton?.label || "Cookie Preferences", hidden: true }), jsxs("dialog", { className: "dsa-cookie-consent-dialogue", children: [jsxs("div", { className: "dsa-cookie-consent-dialogue__header", children: [jsx(Headline, { spaceAfter: "minimum", text: dialogue?.title, level: "h2", style: "h3", className: "dsa-cookie-consent-dialogue__title" }), jsx(Button, { "aria-label": "Close Cookie Consent Dialogue", className: "dsa-cookie-consent-dialogue__close", icon: "close", label: "", autoFocus: true })] }), jsxs("form", { className: "dsa-cookie-consent-dialogue__form", method: "dialog", children: [jsxs("div", { className: "dsa-cookie-consent-dialogue__content", children: [jsx(RichText, { className: "dsa-cookie-consent-dialogue__description", text: dialogue?.description }), jsxs("div", { className: "dsa-cookie-consent-dialogue__options", children: [dialogue?.required?.map((option, index) => (jsxs("div", { className: "dsa-cookie-consent-dialogue__option", "data-consent-type": option.key, children: [jsx(Headline, { spaceAfter: "minimum", text: option.name, level: "h3", style: "h4" }), jsx(Markdown, { className: "dsa-cookie-consent-dialogue__option-description", children: option.description }), jsx("span", { className: "dsa-cookie-consent-dialogue__label", children: dialogue?.alwaysActiveLabel || "Always Active" })] }, index))), dialogue?.options?.map((option, index) => (jsxs("div", { className: "dsa-cookie-consent-dialogue__option", "data-consent-type": option.key, children: [jsx(Headline, { spaceAfter: "minimum", text: option.name, level: "h3", style: "h4" }), jsx(Markdown, { className: "dsa-cookie-consent-dialogue__option-description", children: option.description }), jsxs("div", { className: "dsa-cookie-consent-dialogue__toggle", children: [jsx(Radio, { name: option.key, label: dialogue?.toggleLabels?.accept || "Accept", value: "accept" }), jsx(Radio, { name: option.key, label: dialogue?.toggleLabels?.reject || "Reject", value: "reject" })] })] }, index)))] })] }), jsxs("div", { className: "dsa-cookie-consent-dialogue__buttons", children: [jsx(Button, { type: "button", size: "small", variant: dialogue?.decisionButtonVariant, label: dialogue?.buttons.acceptLabel || "Accept All", className: "dsa-cookie-consent-dialogue__button--activate-all" }), jsx(Button, { type: "button", size: "small", variant: dialogue?.decisionButtonVariant, label: dialogue?.buttons.rejectLabel || "Reject All", className: "dsa-cookie-consent-dialogue__button--deactivate-all" }), jsx(Button, { type: "submit", size: "small", variant: "primary", label: dialogue?.buttons.savePreferencesLabel || "Save Preferences", className: "dsa-cookie-consent-dialogue__button--save" })] })] })] })] }));
 });
 const CookieConsentContext = createContext(CookieConsentContextDefault);
 const CookieConsent = forwardRef((props, ref) => {

package/dist/components/downloads/downloads.css

@@ -1,8 +1,12 @@
 .dsa-downloads {
   --dsa-downloads--gap: var(--ks-spacing-stack-xs);
+  --dsa-downloads-item--background: transparent;
+  --dsa-downloads-item--background-hover: var(--ks-color-fg-alpha-9);
+  --dsa-downloads-item__link--color: var(--ks-text-color-interface-interactive);
+  --dsa-downloads-item__link--color_hover: var(--ks-text-color-interface-interactive-hover);
   --dsa-downloads-item--transition: var(--ks-transition-hover);
   --dsa-downloads-item__gap: var(--ks-spacing-inline-s);
-  --dsa-downloads-item--background-color_hover: var(--ks-background-color-accent);
+  --dsa-downloads-item--background-color_hover: var(--ks-color-fg-alpha-9);
   --dsa-downloads-item--padding: var(--ks-spacing-inset-xs);
   --dsa-downloads-item--border-radius: var(--ks-border-radius-control);
   --dsa-downloads-item__header-flex-basis: 120px;
@@ -34,13 +38,16 @@
   gap: var(--dsa-downloads--gap, var(--ks-spacing-stack-xs));
 }
 .dsa-downloads .dsa-downloads-item {
+  --g-link--background: var(--dsa-downloads-item--background, transparent);
+  --g-link--color: var(--dsa-downloads-item__link--color, var(--ks-text-color-interface-interactive));
+  --g-link--color-hover: var(
+    --dsa-downloads-item__link--color_hover,
+    var(--ks-text-color-interface-interactive-hover)
+  );
+  --g-link--background-hover: var(--dsa-downloads-item--background-color_hover, var(--ks-color-fg-alpha-9));
   --g-link--text-decoration: none;
   --g-link--text-decoration-hover: none;
-  --g-link--color: var(--ks-text-color-interface-interactive);
-  --g-link--color-hover: var(--ks-text-color-interface-interactive);
-  --g-link--border-radius: var(--ks-border-radius-control);
-  --g-link--background: var(--ks-background-color-default);
-  --g-link--background-hover: var(--ks-background-color-default);
+  --g-link--border-radius: 0;
   position: relative;
   display: flex;
   flex-wrap: wrap;
@@ -53,11 +60,9 @@
 }
 .dsa-downloads .dsa-downloads-item:hover {
   cursor: pointer;
-  background-color: var(--dsa-downloads-item--background-color_hover, var(--ks-background-color-accent));
 }
 @media (min-width: 992px) {
   .dsa-downloads .dsa-downloads-item:hover .dsa-downloads-item__button span {
-    background: linear-gradient(270deg, var(--dsa-downloads-item--background-color_hover, var(--ks-background-color-accent)) 80%, transparent);
     opacity: 1;
     transform: translateX(0%);
   }

package/dist/components/event-latest-teaser/event-latest-teaser.css

@@ -37,7 +37,7 @@
   align-self: start;
   position: relative;
   background-color: var(--ks-background-color-primary);
-  color: var(--ks-color-fg-inverted);
+  color: var(--dsa-text-color-on-primary);
   border-radius: var(--ks-border-radius-control);
   display: flex;
   align-items: flex-end;
@@ -113,7 +113,7 @@
 .dsa-event-latest-teaser__cta {
   font: var(--ks-font-interface-s);
   font-weight: var(--ks-font-weight-semi-bold);
-  color: var(--ks-text-color-primary);
+  color: var(--dsa-link--color);
   display: flex;
   align-items: center;
   text-wrap: nowrap;

package/dist/components/event-list-teaser/event-list-teaser.css

@@ -124,7 +124,7 @@
 .dsa-event-list-teaser__cta {
   font: var(--ks-font-interface-s);
   font-weight: var(--ks-font-weight-semi-bold);
-  color: var(--ks-text-color-primary);
+  color: var(--dsa-link--color);
   display: flex;
   align-items: center;
   text-wrap: nowrap;

package/dist/components/event-location/event-location.css

@@ -15,7 +15,7 @@
   justify-content: space-between;
   gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
   background-color: var(--ks-background-color-accent);
-  padding: var(--ks-spacing-inset-m);
+  padding: var(--ks-spacing-inset-l);
   border-radius: var(--ks-border-radius-surface);
   --dsa-event-location__info--flex-basis: 280px;
   --dsa-event-location__appointments--min-width: 12em;
@@ -60,9 +60,9 @@
 .dsa-event-location__appointments {
   display: grid;
   justify-content: flex-end;
-  gap: var(--ks-spacing-stack-s);
+  gap: var(--ks-spacing-s);
   flex-grow: 100;
-  flex-shrink: 0;
+  flex-shrink: 1;
   grid-template-columns: repeat(auto-fill, minmax(min(var(--dsa-event-location__appointments--min-width, 12em), 100%), 1fr));
   font: var(--ks-font-interface-s);
 }

package/dist/components/faq/faq.css

@@ -15,7 +15,7 @@
   --c-collapsible-box-summary--color: var(--dsa-faq__summary--color, var(--dsa-topic--color));
   --c-collapsible-box-summary--font-weight: var(--dsa-faq__summary--font-weight), var(--dsa-topic--font-weight);
   --c-collapsible-box-summary--font: var(--dsa-faq__summary--font, var(--dsa-topic--font));
-  --c-collapsible-box-icon--color: var(--dsa-faq-icon--color, var(--ks-text-color-primary));
+  --c-collapsible-box-icon--color: var(--dsa-faq__icon--color, var(--ks-text-color-primary));
   --c-collapsible-box_header--padding: var(--dsa-faq_header--padding, 1em 0);
   --c-collapsible-box_content--padding: var(--dsa-faq_content--padding, 0em 0em 1em 0em);
   --c-collapsible-box--border-color: var(--dsa-faq--border-color, var(--ks-border-color-accent));

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

@@ -10,6 +10,7 @@
       "title": "Questions",
       "description": "The questions and answers in the Faq section",
       "items": {
+        "title": "Question",
         "type": "object",
         "properties": {
           "question": {
@@ -33,8 +34,7 @@
         },
         "additionalProperties": false,
         "required": [
-          "question",
-          "answer"
+          "question"
         ]
       },
       "minItems": 1

package/dist/components/faq/faq.schema.json

@@ -10,6 +10,7 @@
       "title": "Questions",
       "description": "The questions and answers in the Faq section",
       "items": {
+        "title": "Question",
         "type": "object",
         "properties": {
           "question": {
@@ -28,7 +29,7 @@
           }
         },
         "additionalProperties": false,
-        "required": ["question", "answer"]
+        "required": ["question"]
       },
       "minItems": 1
     }

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

@@ -1,8 +1,25 @@
 /// <reference types="react" />
-import { HTMLAttributes } from "react";
-import { FaqProps } from "../../FaqProps-ad618cd5.js";
-declare const FaqContextDefault: import("react").ForwardRefExoticComponent<FaqProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-declare const FaqContext: import("react").Context<import("react").ForwardRefExoticComponent<FaqProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
-declare const Faq: import("react").ForwardRefExoticComponent<FaqProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export type { FaqProps };
-export { FaqContextDefault, FaqContext, Faq };
+import { ReactNode, HTMLAttributes } from "react";
+import { Question } from "../../FaqProps-78384db5.js";
+import { FaqProps as FaqSchemaProps } from "../../FaqProps-78384db5.js";
+type FaqProps = Omit<FaqSchemaProps, "questions"> & HTMLAttributes<HTMLDivElement> & {
+    questions: ({
+        children?: ReactNode;
+    } & Question)[];
+};
+declare const FaqContextDefault: import("react").ForwardRefExoticComponent<Omit<FaqSchemaProps, "questions"> & HTMLAttributes<HTMLDivElement> & {
+    questions: ({
+        children?: ReactNode;
+    } & Question)[];
+} & import("react").RefAttributes<HTMLDivElement>>;
+declare const FaqContext: import("react").Context<import("react").ForwardRefExoticComponent<Omit<FaqSchemaProps, "questions"> & HTMLAttributes<HTMLDivElement> & {
+    questions: ({
+        children?: ReactNode;
+    } & Question)[];
+} & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Faq: import("react").ForwardRefExoticComponent<Omit<FaqSchemaProps, "questions"> & HTMLAttributes<HTMLDivElement> & {
+    questions: ({
+        children?: ReactNode;
+    } & Question)[];
+} & import("react").RefAttributes<HTMLDivElement>>;
+export { FaqProps, FaqContextDefault, FaqContext, Faq };