@vaadin/component-base 25.0.0-beta1 → 25.0.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.0.0-beta1",
+  "version": "25.0.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,15 +33,15 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@vaadin/vaadin-development-mode-detector": "^2.0.0",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta3",
     "@vaadin/vaadin-usage-statistics": "^2.1.0",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-beta1",
-    "@vaadin/test-runner-commands": "25.0.0-beta1",
+    "@vaadin/chai-plugins": "25.0.0-beta3",
+    "@vaadin/test-runner-commands": "25.0.0-beta3",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^21.0.0"
   },
-  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
+  "gitHead": "4b2006b0e2f4fc131f5483223b852d34224e7b9a"
 }

package/src/define.js

@@ -13,7 +13,7 @@ function dashToCamelCase(dash) {
 
 const experimentalMap = {};
 
-export function defineCustomElement(CustomElement, version = '25.0.0-beta1') {
+export function defineCustomElement(CustomElement, version = '25.0.0-beta3') {
   Object.defineProperty(CustomElement, 'version', {
     get() {
       return version;

package/src/styles/style-props.js

@@ -27,17 +27,12 @@ addGlobalThemeStyles(
         --vaadin-border-color: color-mix(in oklab, var(--vaadin-text-color) 48%, transparent); /* Above 3:1 contrast */
 
         /* Text colors */
-        --vaadin-text-color-disabled: color-mix(
-          in oklab,
-          var(--vaadin-text-color) 48%,
-          transparent
-        ); /* Above 3:1 contrast */
-        --vaadin-text-color-secondary: color-mix(
-          in oklab,
-          var(--vaadin-text-color) 68%,
-          transparent
-        ); /* Above 4.5:1 contrast */
-        --vaadin-text-color: light-dark(#1f1f1f, white); /* Above 7:1 contrast */
+        /* Above 3:1 contrast */
+        --vaadin-text-color-disabled: color-mix(in oklab, var(--vaadin-text-color) 48%, transparent);
+        /* Above 4.5:1 contrast */
+        --vaadin-text-color-secondary: color-mix(in oklab, var(--vaadin-text-color) 68%, transparent);
+        /* Above 7:1 contrast */
+        --vaadin-text-color: light-dark(#1f1f1f, white);
 
         /* Padding */
         --vaadin-padding-xs: 6px;

package/src/styles/user-colors.js

@@ -12,36 +12,48 @@ addGlobalThemeStyles(
     @layer vaadin.base {
       :where(html) {
         --_color-count: 10;
-        --_hue-step: calc(360 / var(--_color-count) - 1);
-        --vaadin-user-color-0: var(--vaadin-user-color, #4172d5);
+        --_hue-step: round(360 / var(--_color-count), 1);
+        --vaadin-user-color-0: var(--vaadin-user-color, oklch(0.52 0.2 240));
         --vaadin-user-color-1: oklch(
-          from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 1)
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * 2 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-2: oklch(
-          from var(--vaadin-user-color-0) min(l + 0.1, 0.8) c calc(h - var(--_hue-step) * 2)
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -2 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-3: oklch(
-          from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 3)
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * 0 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-4: oklch(
-          from var(--vaadin-user-color-0) min(l + 0.1, 0.8) c calc(h - var(--_hue-step) * 4)
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 2 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-5: oklch(
-          from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 5)
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * -2 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-6: oklch(
-          from var(--vaadin-user-color-0) min(l + 0.1, 0.8) c calc(h - var(--_hue-step) * 6)
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -4 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-7: oklch(
-          from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 7)
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * 4 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-8: oklch(
-          from var(--vaadin-user-color-0) min(l + 0.1, 0.8) c calc(h - var(--_hue-step) * 8)
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 4 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-9: oklch(
-          from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 9)
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * 6 * var(---_vaadin-safari-17-deg, 1))
         );
       }
+
+      @supports not (color: hsl(0 0 0)) {
+        :where(:root),
+        :where(:host) {
+          ---_vaadin-safari-17-deg: 1deg;
+        }
+      }
     }
   `,
 );

package/src/virtualizer-iron-list-adapter.js

@@ -231,7 +231,16 @@ export class IronListAdapter {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     this._iterateItems((pidx, vidx) => {
       oldPhysicalSize += this._physicalSizes[pidx];
+      const elementOldPhysicalSize = this._physicalSizes[pidx];
       this._physicalSizes[pidx] = Math.ceil(this.__getBorderBoxHeight(this._physicalItems[pidx]));
+
+      if (this._physicalSizes[pidx] !== elementOldPhysicalSize) {
+        // Physical size changed, but resize observer may not catch it if the original size is restored quickly.
+        // See https://github.com/vaadin/web-components/issues/9077
+        this.__resizeObserver.unobserve(this._physicalItems[pidx]);
+        this.__resizeObserver.observe(this._physicalItems[pidx], { box: 'border-box' });
+      }
+
       newPhysicalSize += this._physicalSizes[pidx];
       this._physicalAverageCount += this._physicalSizes[pidx] ? 1 : 0;
     }, itemSet);
@@ -447,7 +456,7 @@ export class IronListAdapter {
     physicalItems.forEach((el) => {
       el.style.position = 'absolute';
       fragment.appendChild(el);
-      this.__resizeObserver.observe(el);
+      this.__resizeObserver.observe(el, { box: 'border-box' });
     });
     this.elementsContainer.appendChild(fragment);
     return physicalItems;