@kickstartds/ds-agency-premium 1.6.14 → 1.6.16

package/dist/components/blog-overview/index.js

@@ -4,7 +4,6 @@ import { Section } from '../section/index.js';
 import { BlogTeaser } from '../blog-teaser/index.js';
 import { Cta } from '../cta/index.js';
 import { Divider } from '@kickstartds/base/lib/divider';
-import '../section/js/spotlight.client.js';
 import 'classnames';
 import '@kickstartds/core/lib/react';
 import '@kickstartds/base/lib/section';

package/dist/components/blog-post/index.js

@@ -8,7 +8,6 @@ import { Cta } from '../cta/index.js';
 import 'classnames';
 import 'react';
 import '@kickstartds/blog/lib/post-head';
-import '../section/js/spotlight.client.js';
 import '@kickstartds/core/lib/react';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';

package/dist/components/footer/footer.css

@@ -28,7 +28,7 @@
 }
 .dsa-footer__content {
   padding: var(--l-section--space-small) var(--dsa-content--spacing);
-  border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-accent));
+  border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-default));
   max-width: var(--dsa-footer--max-width, var(--l-section--content-width-wide));
   width: 100%;
   margin: auto;

package/dist/components/page-wrapper/index.js

@@ -8,7 +8,6 @@ import 'react';
 import 'classnames';
 import '@kickstartds/base/lib/button';
 import '../section/index.js';
-import '../section/js/spotlight.client.js';
 import '@kickstartds/core/lib/react';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Nov 2024 12:15:04 GMT
+ * Generated on Wed, 20 Nov 2024 14:22:09 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/components/providers/index.js

@@ -9,7 +9,6 @@ import { ButtonGroupProvider } from '../button-group/index.js';
 import 'react';
 import 'classnames';
 import '@kickstartds/base/lib/button';
-import '../section/js/spotlight.client.js';
 import '@kickstartds/core/lib/react';
 import '@kickstartds/base/lib/section';
 import '../section/js/Section.client.js';

package/dist/components/section/index.js

@@ -1,7 +1,6 @@
 import "./section.css";
 import { jsx } from 'react/jsx-runtime';
-import { addSpotlightEffect } from './js/spotlight.client.js';
-import { forwardRef, useEffect, createContext, useContext } from 'react';
+import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { useKsComponent } from '@kickstartds/core/lib/react';
 import { SectionContextDefault as SectionContextDefault$1, SectionContext as SectionContext$1 } from '@kickstartds/base/lib/section';
@@ -17,11 +16,6 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
         spotlight,
         content?.mode === "slider",
     ]);
-    useEffect(() => {
-        if (spotlight) {
-            addSpotlightEffect();
-        }
-    }, [spotlight]);
     return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style &&
             style !== "default" &&
             `dsa-section-style--${style === "verticalGradient"

package/dist/components/section/js/spotlight.client.d.ts

@@ -1,2 +1,2 @@
-declare function addSpotlightEffect(): void;
-export { addSpotlightEffect };
+declare function initSpotlight(element: any): () => void;
+export { initSpotlight };

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

@@ -1,22 +1,14 @@
-const addSpotlightEffect = () => {
-    const initializeSpotlightEffect = () => {
-        const sections = document.querySelectorAll(".dsa-section--spotlight");
-        sections.forEach((section) => {
-            section.addEventListener("mousemove", (event) => {
-                const rect = section.getBoundingClientRect();
-                const x = event.clientX - rect.left;
-                const y = event.clientY - rect.top;
-                section.style.setProperty("--dsa-section__spotlight--position-x", `${x}px`);
-                section.style.setProperty("--dsa-section__spotlight--position-y", `${y}px`);
-            });
-        });
+function onMousemove(event) {
+    this.style.setProperty("--dsa-section__spotlight--top", `${event.clientY - this.getBoundingClientRect().top}px`);
+    this.style.setProperty("--dsa-section__spotlight--left", `${event.clientX - this.getBoundingClientRect().left}px`);
+}
+const initSpotlight = (element) => {
+    element.addEventListener("mousemove", onMousemove, { passive: true });
+    return () => {
+        element.style.removeProperty("--dsa-section__spotlight--top");
+        element.style.removeProperty("--dsa-section__spotlight--left");
+        element.removeEventListener("mousemove", onMousemove, { passive: true });
     };
-    if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", initializeSpotlightEffect);
-    }
-    else {
-        initializeSpotlightEffect();
-    }
 };
 
-export { addSpotlightEffect };
+export { initSpotlight };

package/dist/components/section/section.css

@@ -167,7 +167,7 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  background-image: radial-gradient(var(--dsa-section__spotlight--size) circle at var(--dsa-section__spotlight--position-x) var(--dsa-section__spotlight--position-y), 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_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));

package/dist/global.css

@@ -739,7 +739,9 @@ hr.c-divider {
   --c-rich-text_headline--margin: var(--dsa-rich-text__headline--margin, 0.75em 0 0.5em);
 }
 
-[ks-inverted=false] {
+[ks-inverted=false],
+:root,
+#root {
   --dsa-text-color-on-primary: var(--dsa-text-color-on-primary-base);
   --dsa-text-color-on-primary-inverted: var(--dsa-text-color-on-primary-inverted-base);
 }

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Nov 2024 12:15:07 GMT
+ * Generated on Wed, 20 Nov 2024 14:22:12 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 Wed, 20 Nov 2024 12:15:11 GMT
+ * Generated on Wed, 20 Nov 2024 14:22:16 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 Wed, 20 Nov 2024 12:15:09 GMT
+ * Generated on Wed, 20 Nov 2024 14:22:14 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 Wed, 20 Nov 2024 12:15:13 GMT
+ * Generated on Wed, 20 Nov 2024 14:22:19 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 Wed, 20 Nov 2024 12:15:04 GMT
+ * Generated on Wed, 20 Nov 2024 14:22:09 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 20 Nov 2024 12:15:04 GMT
+ * Generated on Wed, 20 Nov 2024 14:22:10 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#230a2b";

package/package.json

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