@kickstartds/ds-agency-premium 1.6.71--canary.50.2247.0 → 1.6.71--canary.50.2253.0

package/dist/{BlogOverviewProps-9f207f1c.d.ts → BlogOverviewProps-d60aba86.d.ts}

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-d60aba86.js";
+import { SectionProps } from "./SectionProps-4e2b2ecf.js";
 import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
 import { CtaProps } from "./CtaProps-789f8508.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";

package/dist/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-c760fd2a.d.ts}

@@ -5,7 +5,7 @@
  */
 import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
 import { BlogAsideProps } from "./BlogAsideProps-c760fd2a.js";
-import { SectionProps } from "./SectionProps-d60aba86.js";
+import { SectionProps } from "./SectionProps-4e2b2ecf.js";
 import { CtaProps } from "./CtaProps-789f8508.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/{PageProps-aa29c554.d.ts → PageProps-d60aba86.d.ts}

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-d60aba86.js";
+import { SectionProps } from "./SectionProps-4e2b2ecf.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Collection of sections (with their contents) to render on the page

package/dist/{SectionProps-d60aba86.d.ts → SectionProps-4e2b2ecf.d.ts}

@@ -13,7 +13,7 @@ import { FeaturesProps } from "./FeaturesProps-a9041d97.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-fec6b267.js";
 import { HtmlProps } from "./HtmlProps-9d091769.js";
-import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "./ImageStoryProps-4e2b2ecf.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

package/dist/SplitEvenProps-789f8508.d.ts

@@ -10,7 +10,7 @@ import { FeaturesProps } from "./FeaturesProps-a9041d97.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-fec6b267.js";
 import { HtmlProps } from "./HtmlProps-9d091769.js";
-import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "./ImageStoryProps-4e2b2ecf.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

package/dist/SplitWeightedProps-789f8508.d.ts

@@ -10,7 +10,7 @@ import { FeaturesProps } from "./FeaturesProps-a9041d97.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-fec6b267.js";
 import { HtmlProps } from "./HtmlProps-9d091769.js";
-import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "./ImageStoryProps-4e2b2ecf.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

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

@@ -1,4 +1,4 @@
-import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-d60aba86.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
 export type { BlogOverviewProps };

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

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

package/dist/components/image-story/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "../../ImageStoryProps-4e2b2ecf.js";
 declare const ImageStoryContextDefault: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const ImageStoryContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const ImageStory: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -29,8 +29,8 @@ interface SettingsProps {
     seo: SeoProps;
     iconSprite?: IconSprite;
 }
-export * from "../../BlogPostProps-6b3cff22.js";
-export * from "../../BlogOverviewProps-9f207f1c.js";
-export * from "../../PageProps-aa29c554.js";
+export * from "../../BlogPostProps-c760fd2a.js";
+export * from "../../BlogOverviewProps-d60aba86.js";
+export * from "../../PageProps-d60aba86.js";
 export { IconSprite, SettingsProps };
 export * from "../../EventDetailProps-42a7eebe.js";

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

@@ -1,4 +1,4 @@
-import { PageProps } from "../../PageProps-aa29c554.js";
+import { PageProps } from "../../PageProps-d60aba86.js";
 import { FC, PropsWithChildren } from "react";
 declare const Page: FC<PropsWithChildren<PageProps>>;
 export type { PageProps };

package/dist/components/page-wrapper/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 Sep 2025 10:45:55 GMT
+ * Generated on Fri, 05 Sep 2025 12:56:39 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/components/search-form/SearchForm.client.d.ts

@@ -1,8 +1,10 @@
 declare class SearchForm {
     static identifier: string;
     constructor(element: any);
+    lazyResults: WeakMap<object, any>;
     $searchInput: any;
-    $template: any;
+    $resultTemplate: any;
+    $subresultTemplate: any;
     $results: any;
     clearResults(): void;
     showResults(results: any): void;

package/dist/components/search-form/SearchForm.client.js

@@ -1,11 +1,42 @@
 import { define, Component } from '@kickstartds/core/lib/component';
+import { events } from '@kickstartds/core/lib/core';
 
 const parser = new DOMParser();
+const renderResult = (result, element) => {
+    const $ = element.querySelector.bind(element), $$ = element.querySelectorAll.bind(element);
+    if (result.title) {
+        const title = $("[data-result-title]");
+        if (title)
+            title.textContent = result.title;
+    }
+    if (result.excerpt) {
+        const doc = parser.parseFromString(result.excerpt, "text/html");
+        const excerpt = $("[data-result-excerpt]");
+        if (excerpt)
+            excerpt.replaceChildren(...doc.body.childNodes);
+    }
+    if (result.url) {
+        const url = $("[data-result-url]");
+        if (url)
+            url.textContent = result.url;
+        const links = $$("[data-result-link]");
+        for (const link of links) {
+            link.setAttribute("href", result.url);
+        }
+    }
+    if (result.image) {
+        const image = $("[data-result-image]");
+        if (image)
+            image.src = result.image;
+    }
+};
 class SearchForm extends Component {
     constructor(element) {
         super(element);
+        this.lazyResults = new WeakMap();
         this.$searchInput = this.$(".dsa-search-bar__input");
-        this.$template = this.$("[data-template=result]");
+        this.$resultTemplate = this.$("[data-template=result]");
+        this.$subresultTemplate = this.$("[data-template=subresult]");
         this.$results = this.$(".dsa-search-form__results");
         this.on(element, "submit", (event) => {
             event.preventDefault();
@@ -17,28 +48,28 @@ class SearchForm extends Component {
         this.on(window, "hashchange", (event) => {
             window._ks.radio.emit("dsa.search-form.hashchange");
         });
+        this.onRadio(events.beforeunveil, async (_, el) => {
+            if (this.lazyResults.has(el)) {
+                const result = await this.lazyResults.get(el);
+                renderResult(result, el);
+                const $subResults = this.$("[data-result-subresults]", el);
+                for (const subResult of result.subResults) {
+                    const $subResultClone = this.$subresultTemplate.cloneNode(true);
+                    $subResultClone.setAttribute("href", subResult.url);
+                    renderResult(subResult, $subResultClone);
+                    $subResults.appendChild($subResultClone);
+                }
+            }
+        });
     }
     clearResults() {
         this.$results.textContent = "";
     }
     showResults(results) {
         for (const result of results) {
-            const clone = this.$template.cloneNode(true);
-            clone.removeAttribute("hidden");
-            clone.removeAttribute("data-template");
-            clone.firstElementChild.setAttribute("href", result.url);
-            if (result.title) {
-                const title = clone.querySelector(".dsa-search-result__title");
-                title.textContent = result.title;
-            }
-            if (result.excerpt) {
-                const doc = parser.parseFromString(result.excerpt, "text/html");
-                const excerpt = clone.querySelector(".dsa-search-result__text span");
-                excerpt.replaceChildren(...doc.body.childNodes);
-            }
-            const link = clone.querySelector(".dsa-search-result__link");
-            link.textContent = result.url;
-            this.$results.appendChild(clone);
+            const $resultClone = this.$resultTemplate.cloneNode(true);
+            this.lazyResults.set($resultClone, result);
+            this.$results.appendChild($resultClone);
         }
     }
     onRadio(topic, fn) {

package/dist/components/search-form/SearchFormPagefind.client.js

@@ -1,11 +1,22 @@
 import { define } from '@kickstartds/core/lib/component';
 import SearchForm from './SearchForm.client.js';
+import '@kickstartds/core/lib/core';
 
 const staticPageFindPath = "/pagefind/pagefind.js";
+const pagefindResult2searchResult = (result) => ({
+    title: result.meta.title,
+    url: result.url,
+    excerpt: result.excerpt,
+    image: result.meta.image,
+    subResults: (result.sub_results || []).map((subResult) => ({
+        title: subResult.title,
+        url: subResult.url,
+        excerpt: subResult.excerpt,
+    })),
+});
 class SearchFormPagefind extends SearchForm {
     constructor(element) {
         super(element);
-        console.log("hello");
         (async () => {
             const pagefind = await import(/* @vite-ignore */ staticPageFindPath);
             await pagefind.init();
@@ -17,13 +28,9 @@ class SearchFormPagefind extends SearchForm {
                     if (search) {
                         if (search.results.length) {
                             // TODO: Pagination / Load More
-                            const results = await Promise.all(search.results.map((result) => result.data()));
+                            const results = search.results.map((result) => result.data().then(pagefindResult2searchResult));
                             this.clearResults();
-                            this.showResults(results.map((result) => ({
-                                title: result.meta.title,
-                                url: result.url,
-                                excerpt: result.excerpt,
-                            })));
+                            this.showResults(results);
                         }
                     }
                 }

package/dist/components/search-form/index.js

@@ -3,6 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { SearchBar } from '../search-bar/index.js';
 import { SearchResult } from '../search-result/index.js';
+import { SearchResultMatch } from '../search-result-match/index.js';
 import './SearchForm.client.js';
 import 'react';
 import '@kickstartds/form/lib/text-field';
@@ -13,9 +14,9 @@ import '../../helpers-12f48df8.js';
 import '@kickstartds/base/lib/rich-text';
 import '@kickstartds/base/lib/picture';
 import '@kickstartds/core/lib/container';
-import '../search-result-match/index.js';
 import '@kickstartds/core/lib/component';
+import '@kickstartds/core/lib/core';
 
-const SearchForm = ({ className, component = "dsa.search-form", ...props }) => (jsxs("form", { className: classnames("dsa-search-form", className), "ks-component": component, ...props, children: [jsx(SearchBar, { alternativeText: "", alternativeResult: "", hint: "" }), jsx("li", { "data-template": "result", hidden: true, children: jsx(SearchResult, {}) }), jsx("ol", { className: "dsa-search-form__results" })] }));
+const SearchForm = ({ className, component = "dsa.search-form", ...props }) => (jsxs("form", { className: classnames("dsa-search-form", className), "ks-component": component, ...props, children: [jsx(SearchBar, { alternativeText: "", alternativeResult: "", hint: "" }), jsxs("div", { hidden: true, children: [jsx("li", { "data-template": "result", className: "lazyload", children: jsx(SearchResult, { previewImage: {} }) }), jsx(SearchResultMatch, { "data-template": "subresult" })] }), jsx("ol", { className: "dsa-search-form__results" })] }));
 
 export { SearchForm };

package/dist/components/search-form/search-form.css

@@ -1,7 +1,7 @@
 .dsa-search-form__results {
   display: flex;
   flex-direction: column;
-  gap: var(--ks-spacing-m);
+  gap: var(--ks-spacing-stack-l);
   list-style: none;
   padding: 0;
 }

package/dist/components/search-modal/RadioEmit.client.js

@@ -4,7 +4,6 @@ class RadioEmit extends Component {
     constructor(element) {
         super(element);
         const { topic, action = "click", value } = element.dataset;
-        console.log(topic, action);
         const handler = () => window._ks.radio.emit(topic, value);
         element.addEventListener(action, handler);
         this.onDisconnect(() => {

package/dist/components/search-modal/index.js

@@ -23,6 +23,7 @@ import '@kickstartds/base/lib/picture';
 import '@kickstartds/core/lib/container';
 import '../search-result-match/index.js';
 import '../search-form/SearchForm.client.js';
+import '@kickstartds/core/lib/core';
 
 const SearchModal = ({ headline = "Search", closeAriaLabel = "close", formComponent, }) => (jsx("dialog", { "ks-component": "dsa.search-modal", className: "dsa-search-modal", children: jsx(Section, { headline: {
             text: headline,

package/dist/components/search-result/index.js

@@ -20,7 +20,7 @@ const defaults = {
 
 const SearchResultContextDefault = forwardRef(({ title, previewImage, initialMatch, matches, url, showLink }, ref) => (jsx(Container, { name: "search-result", children: jsxs("div", { ref: ref, className: classnames("dsa-search-result", {
             "dsa-search-result--image-large": previewImage?.large,
-        }), children: [jsxs("div", { className: "dsa-search-result__content", children: [jsx("div", { className: "dsa-search-result__header", children: jsx(Link, { href: url, className: "dsa-search-result__title", children: title }) }), initialMatch && (jsx(RichText, { text: initialMatch, className: "dsa-search-result__initial-match" })), matches && matches.length > 0 && (jsx("div", { className: "dsa-search-result__matches", children: matches.map((match, index) => (jsx(SearchResultMatch, { ...match }, index))) })), showLink && (jsx(Link, { href: url, className: "dsa-search-result__link", children: url }))] }), previewImage?.src && (jsx(Link, { tabIndex: -1, "aria-hidden": true, href: url, className: "dsa-search-result__preview-image-wrapper", children: jsx(Picture, { src: previewImage?.src, alt: "", className: "dsa-search-result__preview-image" }) }))] }) })));
+        }), children: [jsxs("div", { className: "dsa-search-result__content", children: [jsx("div", { className: "dsa-search-result__header", children: jsx(Link, { href: url, className: "dsa-search-result__title", "data-result-link": true, "data-result-title": true, children: title }) }), jsx(RichText, { text: initialMatch, className: "dsa-search-result__initial-match", "data-result-excerpt": true }), jsx("div", { className: "dsa-search-result__matches", "data-result-subresults": true, children: matches?.map((match, index) => (jsx(SearchResultMatch, { ...match }, index))) }), showLink && (jsx(Link, { href: url, className: "dsa-search-result__link", "data-result-link": true, "data-result-url": true, children: url }))] }), previewImage && (jsx(Link, { tabIndex: -1, "aria-hidden": true, href: url, className: "dsa-search-result__preview-image-wrapper", "data-result-link": true, children: jsx(Picture, { src: previewImage.src, alt: "", className: "dsa-search-result__preview-image", "data-result-image": true }) }))] }) })));
 const SearchResultContext = createContext(SearchResultContextDefault);
 const SearchResult = forwardRef((props, ref) => {
     const Component = useContext(SearchResultContext);

package/dist/components/search-result/search-result.css

@@ -31,6 +31,9 @@
 .dsa-search-result__matches {
   padding: var(--ks-spacing-xxs) 0;
 }
+.dsa-search-result__matches:empty {
+  display: none;
+}
 .dsa-search-result__title {
   font-size: var(--ks-font-size-display-l);
   font-family: var(--ks-font-family-display);

package/dist/components/search-result-match/index.js

@@ -8,7 +8,7 @@ import { Icon } from '@kickstartds/base/lib/icon';
 
 const defaults = {};
 
-const SearchResultMatchContextDefault = forwardRef(({ title, snippet, url }, ref) => (jsxs(Link, { ref: ref, href: url, className: "dsa-search-result-match", children: [jsxs("div", { className: "dsa-search-result-match__title", children: [jsx(Icon, { className: "dsa-search-result-match__chevron", icon: "chevron-right" }), title] }), jsx(RichText, { text: snippet, className: "dsa-search-result-match__snippet" })] })));
+const SearchResultMatchContextDefault = forwardRef(({ title, snippet, url, ...props }, ref) => (jsxs(Link, { ref: ref, href: url, className: "dsa-search-result-match", "data-result-link": true, ...props, children: [jsxs("div", { className: "dsa-search-result-match__title", children: [jsx(Icon, { className: "dsa-search-result-match__chevron", icon: "chevron-right" }), jsx("span", { "data-result-title": true, children: title })] }), jsx(RichText, { text: snippet, className: "dsa-search-result-match__snippet", "data-result-excerpt": true })] })));
 const SearchResultMatchContext = createContext(SearchResultMatchContextDefault);
 const SearchResultMatch = forwardRef((props, ref) => {
     const Component = useContext(SearchResultMatchContext);

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-4e2b2ecf.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/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 Sep 2025 10:45:57 GMT
+ * Generated on Fri, 05 Sep 2025 12:56:41 GMT
  */
 :root [ks-theme=business] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 05 Sep 2025 10:46:01 GMT
+ * Generated on Fri, 05 Sep 2025 12:56:46 GMT
  */
 :root [ks-theme=google] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 05 Sep 2025 10:45:59 GMT
+ * Generated on Fri, 05 Sep 2025 12:56:44 GMT
  */
 :root [ks-theme=ngo] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 05 Sep 2025 10:46:03 GMT
+ * Generated on Fri, 05 Sep 2025 12:56:48 GMT
  */
 :root [ks-theme=telekom] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/tokens/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 Sep 2025 10:45:55 GMT
+ * Generated on Fri, 05 Sep 2025 12:56:39 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 Sep 2025 10:45:55 GMT
+ * Generated on Fri, 05 Sep 2025 12:56:39 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.6.71--canary.50.2247.0",
+  "version": "1.6.71--canary.50.2253.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {