@kickstartds/ds-agency-premium 1.6.71--canary.45.2226.0 → 1.6.71--canary.50.2232.0

package/dist/{SearchResultProps-5e57c4cb.d.ts → SearchResultProps-4035f21e.d.ts}

@@ -40,8 +40,8 @@ interface PreviewImage {
      */
     src?: string;
     /**
-     * Large display of the preview image.
+     * Small display of the preview image.
      */
-    large?: boolean;
+    small?: boolean;
 }
 export { URL, Title, Text, ShowLink, ARIALabel, SearchResultProps, PreviewImage };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Sep 2025 08:25:20 GMT
+ * Generated on Thu, 04 Sep 2025 10:07:43 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

package/dist/components/presets.json

@@ -3936,13 +3936,13 @@
     "id": "corporate-search-result--default",
     "group": "Corporate / Search Result",
     "name": "Default",
-    "code": "<SearchResult\n  ariaLabel=\"Search Result: AI Conference 2023\"\n  previewImage={{\n    large: false,\n    src: '/img/full-shot-different-people-working-together.png'\n  }}\n  showLink\n  text=\"Join us for the annual **AI Conference** brings together experts from around the world\n[...] register now for the **AI Conference** to secure your spot\n[...] highlights from last year’s **AI Conference** included keynote speeches on machine learning\n[...] find out more about the **AI Conference** agenda and speakers\"\n  title=\"AI Conference 2023\"\n  url=\"https://www.example.com/ai-conference-2023\"\n/>",
+    "code": "<SearchResult\n  ariaLabel=\"Search Result: AI Conference 2023\"\n  previewImage={{\n    small: false,\n    src: '/img/full-shot-different-people-working-together.png'\n  }}\n  showLink\n  text=\"Join us for the annual **AI Conference** brings together experts from around the world\n[...] register now for the **AI Conference** to secure your spot\n[...] highlights from last year’s **AI Conference** included keynote speeches on machine learning\n[...] find out more about the **AI Conference** agenda and speakers\"\n  title=\"AI Conference 2023\"\n  url=\"https://www.example.com/ai-conference-2023\"\n/>",
     "args": {
       "url": "https://www.example.com/ai-conference-2023",
       "title": "AI Conference 2023",
       "previewImage": {
-        "src": "/img/full-shot-different-people-working-together.png",
-        "large": false
+        "small": false,
+        "src": "/img/full-shot-different-people-working-together.png"
       },
       "text": "Join us for the annual **AI Conference** brings together experts from around the world\n[...] register now for the **AI Conference** to secure your spot\n[...] highlights from last year’s **AI Conference** included keynote speeches on machine learning\n[...] find out more about the **AI Conference** agenda and speakers",
       "showLink": true,

package/dist/components/search/Search.client.d.ts

@@ -0,0 +1,6 @@
+declare class Search {
+    static identifier: string;
+    constructor(element: any);
+    on(element: any, type: any, fn: any): () => any;
+}
+export { Search as default };

package/dist/components/search/Search.client.js

@@ -0,0 +1,71 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+
+const staticPageFindPath = "/pagefind/pagefind.js";
+const parser = new DOMParser();
+class Search extends Component {
+    constructor(element) {
+        super(element);
+        const input = element.querySelector(".dsa-search-bar__input");
+        const template = element.querySelector(".dsa\\.search\\.result");
+        const target = element.querySelector(".dsa\\.search\\.results");
+        // TODO: Arrow Key Navigation
+        const clearResults = () => {
+            target.textContent = "";
+        };
+        const showResults = (results) => {
+            for (const result of results) {
+                const clone = template.cloneNode(true);
+                clone.removeAttribute("hidden");
+                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;
+                target.appendChild(clone);
+            }
+        };
+        (async () => {
+            const pagefind = await import(/* @vite-ignore */ staticPageFindPath);
+            await pagefind.init();
+            this.on(input, "input", async (event) => {
+                if (!pagefind)
+                    return;
+                if (input.value.length) {
+                    const search = await pagefind.debouncedSearch(input.value);
+                    if (search) {
+                        if (search.results.length) {
+                            // TODO: Pagination / Load More
+                            const results = await Promise.all(search.results.map((result) => result.data()));
+                            clearResults();
+                            showResults(results.map((result) => ({
+                                title: result.meta.title,
+                                url: result.url,
+                                excerpt: result.excerpt,
+                            })));
+                        }
+                    }
+                }
+                else {
+                    clearResults();
+                }
+            });
+        })();
+    }
+    on(element, type, fn) {
+        const cleanUp = () => element.removeventListener(type, fn);
+        element.addEventListener(type, fn);
+        this.onDisconnect(cleanUp);
+        return cleanUp;
+    }
+}
+Search.identifier = "dsa.search";
+define(Search.identifier, Search);
+
+export { Search as default };

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

@@ -8,7 +8,7 @@ import { FC, PropsWithChildren } from "react";
 import { HeadlineProps } from "../../HeadlineProps-e1305784.js";
 import { SearchBarProps } from "../../SearchBarProps-26263244.js";
 import { SearchFilterProps } from "../../SearchFilterProps-2fa6419b.js";
-import { SearchResultProps } from "../../SearchResultProps-5e57c4cb.js";
+import { SearchResultProps } from "../../SearchResultProps-4035f21e.js";
 interface SearchProps {
     /**
      * Referenced component HeadlineProps

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

@@ -234,14 +234,11 @@
             "properties": {
               "src": {
                 "type": "string",
-                "description": "A URL to an image preview for the search result.",
-                "examples": [
-                  "/img/full-shot-different-people-working-together.png"
-                ]
+                "description": "A URL to an image preview for the search result."
               },
-              "large": {
+              "small": {
                 "type": "boolean",
-                "description": "Large display of the preview image.",
+                "description": "Small display of the preview image.",
                 "default": false
               }
             },

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

@@ -9,7 +9,7 @@ import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 
 const defaults = {};
 
-const SearchBarContextDefault = forwardRef(({ placeholder, hint = "Press <kbd>Enter</kbd> to search", alternativeText = "Did you mean", alternativeResult = "AI Conference", }, ref) => (jsxs("div", { className: "dsa-search-bar", ref: ref, children: [jsxs("div", { className: "dsa-search-bar__input-container", children: [jsx(TextField, { hideLabel: true, type: "search", placeholder: placeholder || "Search...", className: "dsa-search-bar__input" }), jsx(Icon, { icon: "search" })] }), hint && jsx(Markdown, { className: "dsa-search-bar__hint", children: hint }), alternativeResult && (jsx("p", { className: "dsa-search-bar__alternative-text", children: jsxs(Fragment, { children: [alternativeText + " ", jsx(Link, { href: "#", children: alternativeResult })] }) }))] })));
+const SearchBarContextDefault = forwardRef(({ placeholder, hint = "Press <kbd>Enter</kbd> to search", alternativeText = "Did you mean", alternativeResult = "AI Conference", }, ref) => (jsxs("div", { className: "dsa-search-bar", ref: ref, children: [jsxs("div", { className: "dsa-search-bar__input-container", children: [jsx(TextField, { hideLabel: true, type: "search", placeholder: placeholder || "Search...", className: "dsa-search-bar__input", autoComplete: "off" }), jsx(Icon, { icon: "search" })] }), hint && jsx(Markdown, { className: "dsa-search-bar__hint", children: hint }), alternativeResult && (jsx("p", { className: "dsa-search-bar__alternative-text", children: jsxs(Fragment, { children: [alternativeText + " ", jsx(Link, { href: "#", children: alternativeResult })] }) }))] })));
 const SearchBarContext = createContext(SearchBarContextDefault);
 const SearchBar = forwardRef((props, ref) => {
     const Component = useContext(SearchBarContext);

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SearchResultProps } from "../../SearchResultProps-5e57c4cb.js";
+import { SearchResultProps } from "../../SearchResultProps-4035f21e.js";
 declare const SearchResultContextDefault: import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLAnchorElement>>;
 declare const SearchResultContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLAnchorElement>>>;
 declare const SearchResult: import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLAnchorElement>>;

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

@@ -9,14 +9,14 @@ import { Picture } from '@kickstartds/base/lib/picture';
 
 const defaults = {
     "previewImage": {
-        "large": false
+        "small": false
     },
     "showLink": true
 };
 
 const SearchResultContextDefault = forwardRef(({ title, previewImage, text, url, showLink, ariaLabel }, ref) => (jsxs(Link, { "aria-label": ariaLabel, href: url, className: classnames("dsa-search-result", {
-        "dsa-search-result--image-large": previewImage?.large,
-    }), ref: ref, children: [previewImage && (jsx(Picture, { src: previewImage?.src, alt: "", className: "dsa-search-result__image" })), jsxs("div", { className: "dsa-search-result__content", children: [jsx("span", { className: "dsa-search-result__title", children: title }), jsx(RichText, { text: text, className: "dsa-search-result__text" }), showLink && jsx("span", { className: "dsa-search-result__link", children: url })] })] })));
+        "dsa-search-result--image-small": previewImage?.small,
+    }), ref: ref, children: [jsx(Picture, { src: "img/full-shot-different-people-working-together.png", alt: "", className: "dsa-search-result__image" }), jsxs("div", { className: "dsa-search-result__content", children: [jsx("span", { className: "dsa-search-result__title", children: title }), jsx(RichText, { text: text, className: "dsa-search-result__text" }), showLink && jsx("span", { className: "dsa-search-result__link", children: url })] })] })));
 const SearchResultContext = createContext(SearchResultContextDefault);
 const SearchResult = forwardRef((props, ref) => {
     const Component = useContext(SearchResultContext);

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

@@ -12,20 +12,23 @@
 .dsa-search-result:hover {
   border-color: var(--ks-border-color-card-interactive-hover);
 }
-.dsa-search-result--image-large .dsa-search-result__image {
-  max-width: var(--dsa-tile--width_medium);
+.dsa-search-result--image-small .dsa-search-result__image {
+  max-width: var(--dsa-tile--width_smallest);
 }
 .dsa-search-result__image {
-  flex-grow: 0;
-  max-width: var(--dsa-tile--width_small);
-  aspect-ratio: 4/3;
+  width: 100%;
+  height: fit-content;
   object-fit: cover;
+  aspect-ratio: 4/3;
+  border-radius: calc(var(--ks-border-radius-card) / 2);
+  max-width: var(--dsa-tile--width_small);
 }
 .dsa-search-result__content {
   display: flex;
   flex-direction: column;
   gap: var(--ks-spacing-stack-xs);
   flex-grow: 1;
+  flex-basis: var(--dsa-tile--width_medium);
 }
 .dsa-search-result__title {
   font: var(--dsa-topic--font);
@@ -33,7 +36,8 @@
   font-weight: var(--dsa-topic--font-weight);
 }
 .dsa-search-result__link {
-  width: fit-content;
+  max-width: 100%;
+  width: auto;
   font: var(--ks-font-interface-s);
   color: var(--dsa-link--color);
   transition: inherit;

package/dist/components/search-result/search-result.schema.dereffed.json

@@ -27,14 +27,11 @@
       "properties": {
         "src": {
           "type": "string",
-          "description": "A URL to an image preview for the search result.",
-          "examples": [
-            "/img/full-shot-different-people-working-together.png"
-          ]
+          "description": "A URL to an image preview for the search result."
         },
-        "large": {
+        "small": {
           "type": "boolean",
-          "description": "Large display of the preview image.",
+          "description": "Small display of the preview image.",
           "default": false
         }
       },

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

@@ -23,12 +23,11 @@
       "properties": {
         "src": {
           "type": "string",
-          "description": "A URL to an image preview for the search result.",
-          "examples": ["/img/full-shot-different-people-working-together.png"]
+          "description": "A URL to an image preview for the search result."
         },
-        "large": {
+        "small": {
           "type": "boolean",
-          "description": "Large display of the preview image.",
+          "description": "Small display of the preview image.",
           "default": false
         }
       }

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Sep 2025 08:25:22 GMT
+ * Generated on Thu, 04 Sep 2025 10:07:45 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 Thu, 04 Sep 2025 08:25:27 GMT
+ * Generated on Thu, 04 Sep 2025 10:07:50 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 Thu, 04 Sep 2025 08:25:25 GMT
+ * Generated on Thu, 04 Sep 2025 10:07:47 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 Thu, 04 Sep 2025 08:25:29 GMT
+ * Generated on Thu, 04 Sep 2025 10:07:52 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 Thu, 04 Sep 2025 08:25:20 GMT
+ * Generated on Thu, 04 Sep 2025 10:07:43 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Sep 2025 08:25:21 GMT
+ * Generated on Thu, 04 Sep 2025 10:07:43 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.6.71--canary.45.2226.0",
+  "version": "1.6.71--canary.50.2232.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {
@@ -39,7 +39,7 @@
     "dist"
   ],
   "scripts": {
-    "build-storybook": "yarn build-tokens && yarn schema && yarn token && storybook build",
+    "build-storybook": "yarn build-tokens && yarn schema && yarn token && yarn search && storybook build",
     "postbuild-storybook": "yarn presets && yarn playroom:build && mkdir -p dist/components && cp snippets.json dist/components/presets.json",
     "build-tokens-ds-agency": "kickstartDS tokens compile",
     "build-tokens-business": "kickstartDS tokens compile --token-dictionary-path src/token-business/dictionary --sd-config-path sd.config-business.cjs",
@@ -53,6 +53,7 @@
     "playroom:start": "playroom start",
     "playroom:build": "playroom build",
     "presets": "vitest run scripts/generatePresets.test.ts",
+    "search": "rm -rf static/pagefind && vitest run scripts/generateSearchIndex.test.ts",
     "husky:precommit": "yarn schema && rollup -c",
     "prepare": "patch-package && husky install",
     "prepublishOnly": "rm -rf dist && yarn build-tokens && yarn schema && rollup -c && yarn build-storybook",
@@ -120,6 +121,7 @@
     "kickstartds": "3.5.0--canary.62.324.0",
     "lazysizes": "^5.3.2",
     "npm-run-all": "^4.1.5",
+    "pagefind": "^1.4.0",
     "patch-package": "^8.0.0",
     "playroom": "^0.34.1",
     "postcss": "^8.4.29",