@vaadin/component-base 25.0.0-alpha15 → 25.0.0-alpha17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.0.0-alpha15",
+  "version": "25.0.0-alpha17",
   "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-alpha15",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha17",
     "@vaadin/vaadin-usage-statistics": "^2.1.0",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha15",
-    "@vaadin/test-runner-commands": "25.0.0-alpha15",
+    "@vaadin/chai-plugins": "25.0.0-alpha17",
+    "@vaadin/test-runner-commands": "25.0.0-alpha17",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "sinon": "^21.0.0"
   },
-  "gitHead": "1ad98437e7600769bf66f870929feefbeef16edf"
+  "gitHead": "8264c71309907be99368b09414f0f8d7f591e0b9"
 }

package/src/data-provider-controller/helpers.js

@@ -18,6 +18,7 @@
  *
  * @param {Cache} cache
  * @param {number} flatIndex
+ * @param {number} level
  */
 export function getFlatIndexContext(cache, flatIndex, level = 0) {
   let levelIndex = flatIndex;
@@ -53,7 +54,6 @@ export function getFlatIndexContext(cache, flatIndex, level = 0) {
  *
  * If the item isn't found, the method returns undefined.
  *
- * @param {Cache} cache
  * @param {{ getItemId: (item: unknown) => unknown}} context
  * @param {Cache} cache
  * @param {unknown} targetItem

package/src/define.js

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

package/src/polylit-mixin.js

@@ -215,26 +215,10 @@ const PolylitMixinImplementation = (superclass) => {
       };
     }
 
-    constructor() {
-      super();
-      this.__hasPolylitMixin = true;
-    }
-
     /** @protected */
     connectedCallback() {
       super.connectedCallback();
 
-      // Components like `vaadin-overlay` are teleported to the body element when opened.
-      // If their opened state is set as an attribute, the teleportation happens immediately
-      // after they are connected to the DOM. This means they will be outside the scope of
-      // querySelectorAll in the parent component's `firstUpdated()`. To ensure their reference
-      // is still registered in the $ map, we propagate the reference here.
-      const parentHost = this.getRootNode().host;
-      if (parentHost && parentHost.__hasPolylitMixin && this.id) {
-        parentHost.$ ||= {};
-        parentHost.$[this.id] = this;
-      }
-
       const { polylitConfig } = this.constructor;
       if (!this.hasUpdated && !polylitConfig.asyncFirstRender) {
         this.performUpdate();

package/src/slot-controller.js

@@ -15,7 +15,7 @@ export class SlotController extends EventTarget {
    * Ensure that every instance has unique ID.
    *
    * @param {HTMLElement} host
-   * @param {string} slotName
+   * @param {string} prefix
    * @return {string}
    * @protected
    */

package/src/styles/style-props.js

@@ -15,20 +15,20 @@ addGlobalThemeStyles(
         --vaadin-background-color: light-dark(#fff, #222);
 
         /* Container colors */
-        --vaadin-background-container: color-mix(in oklch, var(--vaadin-color) 5%, var(--vaadin-background-color));
+        --vaadin-background-container: color-mix(in oklab, var(--vaadin-color) 5%, var(--vaadin-background-color));
         --vaadin-background-container-strong: color-mix(
-          in oklch,
+          in oklab,
           var(--vaadin-color) 10%,
           var(--vaadin-background-color)
         );
 
         /* Border colors */
-        --vaadin-border-color-subtle: color-mix(in oklch, var(--vaadin-color) 24%, transparent);
-        --vaadin-border-color: color-mix(in oklch, var(--vaadin-color) 48%, transparent); /* Above 3:1 contrast */
+        --vaadin-border-color-subtle: color-mix(in oklab, var(--vaadin-color) 24%, transparent);
+        --vaadin-border-color: color-mix(in oklab, var(--vaadin-color) 48%, transparent); /* Above 3:1 contrast */
 
         /* Text colors */
-        --vaadin-color-disabled: color-mix(in oklch, var(--vaadin-color) 48%, transparent); /* Above 3:1 contrast */
-        --vaadin-color-subtle: color-mix(in oklch, var(--vaadin-color) 68%, transparent); /* Above 4.5:1 contrast */
+        --vaadin-color-disabled: color-mix(in oklab, var(--vaadin-color) 48%, transparent); /* Above 3:1 contrast */
+        --vaadin-color-subtle: color-mix(in oklab, var(--vaadin-color) 68%, transparent); /* Above 4.5:1 contrast */
         --vaadin-color: light-dark(#1f1f1f, white); /* Above 7:1 contrast */
 
         /* Padding */
@@ -40,9 +40,11 @@ addGlobalThemeStyles(
         --vaadin-padding-container: var(--vaadin-padding-xs) var(--vaadin-padding-s);
 
         /* Gap/spacing */
+        --vaadin-gap-xs: 6px;
         --vaadin-gap-s: 8px;
         --vaadin-gap-m: 12px;
         --vaadin-gap-l: 16px;
+        --vaadin-gap-xl: 24px;
 
         /* Border radius */
         --vaadin-radius-s: 3px;

package/src/tooltip-controller.js

@@ -14,6 +14,7 @@ export class TooltipController extends SlotController {
     super(host, 'tooltip');
 
     this.setTarget(host);
+    this.__onContentChange = this.__onContentChange.bind(this);
   }
 
   /**
@@ -50,7 +51,11 @@ export class TooltipController extends SlotController {
       tooltipNode.shouldShow = this.shouldShow;
     }
 
-    this.__notifyChange();
+    if (!this.manual) {
+      this.host.setAttribute('has-tooltip', '');
+    }
+    this.__notifyChange(tooltipNode);
+    tooltipNode.addEventListener('content-changed', this.__onContentChange);
   }
 
   /**
@@ -60,8 +65,12 @@ export class TooltipController extends SlotController {
    * @protected
    * @override
    */
-  teardownNode() {
-    this.__notifyChange();
+  teardownNode(tooltipNode) {
+    if (!this.manual) {
+      this.host.removeAttribute('has-tooltip');
+    }
+    tooltipNode.removeEventListener('content-changed', this.__onContentChange);
+    this.__notifyChange(null);
   }
 
   /**
@@ -160,7 +169,12 @@ export class TooltipController extends SlotController {
   }
 
   /** @private */
-  __notifyChange() {
-    this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node: this.node } }));
+  __onContentChange(event) {
+    this.__notifyChange(event.target);
+  }
+
+  /** @private */
+  __notifyChange(node) {
+    this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node } }));
   }
 }

package/src/virtualizer.js

@@ -78,9 +78,7 @@ export class Virtualizer {
   /**
    * Flushes active asynchronous tasks so that the component and the DOM end up in a stable state
    *
-   * @method update
-   * @param {number | undefined} startIndex The start index of the range
-   * @param {number | undefined} endIndex The end index of the range
+   * @method flush
    */
   flush() {
     this.__adapter.flush();

package/src/warnings.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Issues a warning in the browser console if it has not been issued before.
+ */
+export declare function issueWarning(warning: string): void;

package/src/warnings.js

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const issuedWarnings = new Set();
+
+/**
+ * Issues a warning in the browser console if it has not been issued before.
+ * @param {string} warning
+ */
+export function issueWarning(warning) {
+  if (issuedWarnings.has(warning)) {
+    return;
+  }
+
+  issuedWarnings.add(warning);
+  console.warn(warning);
+}
+
+/**
+ * Clears all issued warnings. Only intended for testing purposes.
+ */
+export function clearWarnings() {
+  issuedWarnings.clear();
+}