Merge branch 'refs/heads/main' into improve-text-mixin

package.json

@@ -100,8 +100,8 @@
     "@storybook/web-components-vite": "8.2.9",
     "@types/glob": "8.1.0",
     "@types/mocha": "10.0.7",
-    "@types/node": "20.16.2",
-    "@types/react": "18.3.4",
+    "@types/node": "20.16.3",
+    "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "8.3.0",
     "@typescript-eslint/parser": "8.3.0",
@@ -126,12 +126,12 @@
     "glob": "11.0.0",
     "globals": "15.9.0",
     "husky": "9.1.5",
-    "lint-staged": "15.2.9",
+    "lint-staged": "15.2.10",
     "lit-analyzer": "2.0.3",
     "madge": "8.0.0",
     "npm-run-all2": "6.2.2",
     "playwright": "1.46.1",
-    "postcss": "8.4.41",
+    "postcss": "8.4.43",
     "prettier": "3.3.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -148,10 +148,10 @@
     "typescript-eslint": "8.3.0",
     "urlpattern-polyfill": "10.0.0",
     "vite": "5.4.2",
-    "vite-plugin-dts": "4.0.3"
+    "vite-plugin-dts": "4.1.0"
   },
   "resolutions": {
-    "@types/node": "20.16.2",
+    "@types/node": "20.16.3",
     "@webcomponents/template-shadowroot": "0.2.1",
     "@web/dev-server-core": "0.7.1",
     "jackspeak": "2.1.1",

src/elements/teaser-hero/teaser-hero.scss

@@ -10,7 +10,7 @@
   // which appears in normalize css of several frameworks.
   outline: none !important;
 
-  --sbb-teaser-hero-brightness-hover: 1.075;
+  --sbb-teaser-hero-brightness-hover: var(--sbb-hover-image-brightness);
   --sbb-teaser-hero-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto
     var(--sbb-spacing-responsive-xxxs);
 

src/elements/teaser-product/teaser-product/teaser-product.scss

@@ -1,7 +1,7 @@
 @use '../../core/styles/index' as sbb;
 
 :host {
-  --sbb-teaser-product-brightness-hover: 1.075;
+  --sbb-teaser-product-brightness-hover: var(--sbb-hover-image-brightness);
   --sbb-teaser-product-animation-duration: var(
     --sbb-disable-animation-zero-time,
     var(--sbb-animation-duration-4x)

src/elements/teaser/teaser.scss

@@ -17,7 +17,7 @@
   --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
   --sbb-teaser-width: fit-content;
   --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
-  --sbb-teaser-brightness-hover: 1.075;
+  --sbb-teaser-brightness-hover: var(--sbb-hover-image-brightness);
   --sbb-teaser-animation-duration: var(
     --sbb-disable-animation-zero-time,
     var(--sbb-animation-duration-4x)

src/react/core/create-component.ts

@@ -315,12 +315,12 @@ export const createComponent = <I extends HTMLElement, E extends EventNames = {}
           setProperty(
             elementRef.current,
             key,
-            props[key],
+            (props as Record<string, unknown>)[key],
             prevElemPropsRef.current.get(key),
             events,
           );
           prevElemPropsRef.current.delete(key);
-          newElemProps.set(key, props[key]);
+          newElemProps.set(key, (props as Record<string, unknown>)[key]);
         }
         // "Unset" any props from previous render that no longer exist.
         // Setting to `undefined` seems like the correct thing to "unset"