@vaadin/component-base 25.1.2 → 25.2.0-alpha10

package/custom-elements.json

@@ -7,9 +7,22 @@
       "path": "src/delegate-state-mixin.js",
       "declarations": [
         {
-          "kind": "variable",
+          "kind": "mixin",
+          "description": "",
           "name": "DelegateStateMixin",
-          "description": "A mixin to delegate properties and attributes to a target element."
+          "members": [],
+          "attributes": [],
+          "parameters": [
+            {
+              "name": "superclass"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "dedupeMixin",
+              "package": "@open-wc/dedupe-mixin"
+            }
+          ]
         }
       ],
       "exports": [
@@ -223,9 +236,21 @@
       "path": "src/resize-mixin.js",
       "declarations": [
         {
-          "kind": "variable",
+          "kind": "mixin",
+          "description": "A mixin that uses a ResizeObserver to listen to host size changes.",
           "name": "ResizeMixin",
-          "description": "A mixin that uses a ResizeObserver to listen to host size changes."
+          "members": [],
+          "parameters": [
+            {
+              "name": "superclass"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "dedupeMixin",
+              "package": "@open-wc/dedupe-mixin"
+            }
+          ]
         }
       ],
       "exports": [
@@ -244,9 +269,21 @@
       "path": "src/slot-styles-mixin.js",
       "declarations": [
         {
-          "kind": "variable",
+          "kind": "mixin",
+          "description": "Mixin to insert styles into the outer scope to handle slotted components.\nThis is useful e.g. to hide native `<input type=\"number\">` controls.",
           "name": "SlotStylesMixin",
-          "description": "Mixin to insert styles into the outer scope to handle slotted components.\nThis is useful e.g. to hide native `<input type=\"number\">` controls."
+          "members": [],
+          "parameters": [
+            {
+              "name": "superclass"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "dedupeMixin",
+              "package": "@open-wc/dedupe-mixin"
+            }
+          ]
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.1.2",
+  "version": "25.2.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~25.1.2",
-    "@vaadin/test-runner-commands": "~25.1.2",
+    "@vaadin/chai-plugins": "25.2.0-alpha10",
+    "@vaadin/test-runner-commands": "25.2.0-alpha10",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "48e5dc507ac5eb8d34839be06cac652f1635fe1c"
+  "gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
 }

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

@@ -105,7 +105,7 @@ export function getFlatIndexByPath(cache, [levelIndex, ...subIndexes], flatIndex
 
   const flatIndexOnLevel = cache.getFlatIndex(levelIndex);
   const subCache = cache.getSubCache(levelIndex);
-  if (subCache && subCache.flatSize > 0 && subIndexes.length) {
+  if (subCache?.flatSize > 0 && subIndexes.length) {
     return getFlatIndexByPath(subCache, subIndexes, flatIndex + flatIndexOnLevel + 1);
   }
   return flatIndex + flatIndexOnLevel;

package/src/define.js

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

package/src/delegate-state-mixin.js

@@ -10,116 +10,117 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  *
  * @polymerMixin
  */
-export const DelegateStateMixin = dedupeMixin(
-  (superclass) =>
-    class DelegateStateMixinClass extends superclass {
-      static get properties() {
-        return {
-          /**
-           * A target element to which attributes and properties are delegated.
-           * @protected
-           */
-          stateTarget: {
-            type: Object,
-            observer: '_stateTargetChanged',
-          },
-        };
+const DelegateStateMixinImplementation = (superclass) => {
+  return class DelegateStateMixinClass extends superclass {
+    static get properties() {
+      return {
+        /**
+         * A target element to which attributes and properties are delegated.
+         * @protected
+         */
+        stateTarget: {
+          type: Object,
+          observer: '_stateTargetChanged',
+        },
+      };
+    }
+
+    /**
+     * An array of the host attributes to delegate to the target element.
+     */
+    static get delegateAttrs() {
+      return [];
+    }
+
+    /**
+     * An array of the host properties to delegate to the target element.
+     */
+    static get delegateProps() {
+      return [];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this._createDelegateAttrsObserver();
+      this._createDelegatePropsObserver();
+    }
+
+    /** @protected */
+    _stateTargetChanged(target) {
+      if (target) {
+        this._ensureAttrsDelegated();
+        this._ensurePropsDelegated();
       }
-
-      /**
-       * An array of the host attributes to delegate to the target element.
-       */
-      static get delegateAttrs() {
-        return [];
+    }
+
+    /** @protected */
+    _createDelegateAttrsObserver() {
+      this._createMethodObserver(`_delegateAttrsChanged(${this.constructor.delegateAttrs.join(', ')})`);
+    }
+
+    /** @protected */
+    _createDelegatePropsObserver() {
+      this._createMethodObserver(`_delegatePropsChanged(${this.constructor.delegateProps.join(', ')})`);
+    }
+
+    /** @protected */
+    _ensureAttrsDelegated() {
+      this.constructor.delegateAttrs.forEach((name) => {
+        this._delegateAttribute(name, this[name]);
+      });
+    }
+
+    /** @protected */
+    _ensurePropsDelegated() {
+      this.constructor.delegateProps.forEach((name) => {
+        this._delegateProperty(name, this[name]);
+      });
+    }
+
+    /** @protected */
+    _delegateAttrsChanged(...values) {
+      this.constructor.delegateAttrs.forEach((name, index) => {
+        this._delegateAttribute(name, values[index]);
+      });
+    }
+
+    /** @protected */
+    _delegatePropsChanged(...values) {
+      this.constructor.delegateProps.forEach((name, index) => {
+        this._delegateProperty(name, values[index]);
+      });
+    }
+
+    /** @protected */
+    _delegateAttribute(name, value) {
+      if (!this.stateTarget) {
+        return;
       }
 
-      /**
-       * An array of the host properties to delegate to the target element.
-       */
-      static get delegateProps() {
-        return [];
+      if (name === 'invalid') {
+        this._delegateAttribute('aria-invalid', value ? 'true' : false);
       }
 
-      /** @protected */
-      ready() {
-        super.ready();
-
-        this._createDelegateAttrsObserver();
-        this._createDelegatePropsObserver();
+      if (typeof value === 'boolean') {
+        this.stateTarget.toggleAttribute(name, value);
+      } else if (value) {
+        this.stateTarget.setAttribute(name, value);
+      } else {
+        this.stateTarget.removeAttribute(name);
       }
+    }
 
-      /** @protected */
-      _stateTargetChanged(target) {
-        if (target) {
-          this._ensureAttrsDelegated();
-          this._ensurePropsDelegated();
-        }
+    /** @protected */
+    _delegateProperty(name, value) {
+      if (!this.stateTarget) {
+        return;
       }
 
-      /** @protected */
-      _createDelegateAttrsObserver() {
-        this._createMethodObserver(`_delegateAttrsChanged(${this.constructor.delegateAttrs.join(', ')})`);
-      }
-
-      /** @protected */
-      _createDelegatePropsObserver() {
-        this._createMethodObserver(`_delegatePropsChanged(${this.constructor.delegateProps.join(', ')})`);
-      }
-
-      /** @protected */
-      _ensureAttrsDelegated() {
-        this.constructor.delegateAttrs.forEach((name) => {
-          this._delegateAttribute(name, this[name]);
-        });
-      }
-
-      /** @protected */
-      _ensurePropsDelegated() {
-        this.constructor.delegateProps.forEach((name) => {
-          this._delegateProperty(name, this[name]);
-        });
-      }
+      this.stateTarget[name] = value;
+    }
+  };
+};
 
-      /** @protected */
-      _delegateAttrsChanged(...values) {
-        this.constructor.delegateAttrs.forEach((name, index) => {
-          this._delegateAttribute(name, values[index]);
-        });
-      }
-
-      /** @protected */
-      _delegatePropsChanged(...values) {
-        this.constructor.delegateProps.forEach((name, index) => {
-          this._delegateProperty(name, values[index]);
-        });
-      }
-
-      /** @protected */
-      _delegateAttribute(name, value) {
-        if (!this.stateTarget) {
-          return;
-        }
-
-        if (name === 'invalid') {
-          this._delegateAttribute('aria-invalid', value ? 'true' : false);
-        }
-
-        if (typeof value === 'boolean') {
-          this.stateTarget.toggleAttribute(name, value);
-        } else if (value) {
-          this.stateTarget.setAttribute(name, value);
-        } else {
-          this.stateTarget.removeAttribute(name);
-        }
-      }
-
-      /** @protected */
-      _delegateProperty(name, value) {
-        if (!this.stateTarget) {
-          return;
-        }
-
-        this.stateTarget[name] = value;
-      }
-    },
-);
+export const DelegateStateMixin = dedupeMixin(DelegateStateMixinImplementation);

package/src/dom-utils.js

@@ -74,7 +74,7 @@ export function getClosestElement(selector, node) {
     return null;
   }
 
-  return node.closest(selector) || getClosestElement(selector, node.getRootNode().host);
+  return node.closest?.(selector) || getClosestElement(selector, node.getRootNode().host);
 }
 
 /**

package/src/gestures.js

@@ -232,7 +232,7 @@ export function deepTargetFind(x, y) {
   // This code path is only taken when native ShadowDOM is used
   // if there is a shadowroot, it may have a node at x/y
   // if there is not a shadowroot, exit the loop
-  while (next && next.shadowRoot && !window.ShadyDOM) {
+  while (next?.shadowRoot && !window.ShadyDOM) {
     // If there is a node at x/y in the shadowroot, look deeper
     const oldNext = next;
     next = next.shadowRoot.elementFromPoint(x, y);
@@ -448,7 +448,7 @@ function _remove(node, evType, handler) {
     for (let i = 0, dep, gd; i < deps.length; i++) {
       dep = deps[i];
       gd = gobj[dep];
-      if (gd && gd[name]) {
+      if (gd?.[name]) {
         gd[name] = (gd[name] || 1) - 1;
         gd._count = (gd._count || 1) - 1;
         if (gd._count === 0) {
@@ -531,7 +531,7 @@ function _fire(target, type, detail) {
   // Forward `preventDefault` in a clean way
   if (ev.defaultPrevented) {
     const preventer = detail.preventer || detail.sourceEvent;
-    if (preventer && preventer.preventDefault) {
+    if (preventer?.preventDefault) {
       preventer.preventDefault();
     }
   }

package/src/overflow-controller.js

@@ -3,8 +3,6 @@
  * Copyright (c) 2021 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { animationFrame } from './async.js';
-import { Debouncer } from './debounce.js';
 
 /**
  * A controller that detects if content inside the element overflows its scrolling viewport,
@@ -48,12 +46,7 @@ export class OverflowController {
   observe() {
     const { host } = this;
 
-    this.__resizeObserver = new ResizeObserver(() => {
-      this.__debounceOverflow = Debouncer.debounce(this.__debounceOverflow, animationFrame, () => {
-        this.__updateOverflow();
-      });
-    });
-
+    this.__resizeObserver = new ResizeObserver(() => this.__onResize());
     this.__resizeObserver.observe(host);
 
     // Observe initial children
@@ -74,26 +67,43 @@ export class OverflowController {
             this.__resizeObserver.unobserve(node);
           }
         });
-      });
 
-      this.__updateOverflow();
+        if (addedNodes.length === 0 && removedNodes.length > 0) {
+          this.__updateState({ sync: true });
+        }
+      });
     });
 
     this.__childObserver.observe(host, { childList: true });
 
     // Update overflow attribute on scroll
     this.scrollTarget.addEventListener('scroll', this.__boundOnScroll);
+  }
 
-    this.__updateOverflow();
+  /** @private */
+  __onResize() {
+    this.__updateState({ sync: false });
   }
 
   /** @private */
   __onScroll() {
-    this.__updateOverflow();
+    this.__updateState({ sync: true });
   }
 
   /** @private */
-  __updateOverflow() {
+  __updateState({ sync }) {
+    cancelAnimationFrame(this.__resizeRaf);
+
+    const state = this.__readState();
+    if (sync) {
+      this.__writeState(state);
+    } else {
+      this.__resizeRaf = requestAnimationFrame(() => this.__writeState(state));
+    }
+  }
+
+  /** @private */
+  __readState() {
     const target = this.scrollTarget;
 
     let overflow = '';
@@ -115,10 +125,14 @@ export class OverflowController {
       overflow += ' end';
     }
 
-    overflow = overflow.trim();
-    if (overflow.length > 0 && this.host.getAttribute('overflow') !== overflow) {
+    return { overflow: overflow.trim() };
+  }
+
+  /** @private */
+  __writeState({ overflow }) {
+    if (overflow) {
       this.host.setAttribute('overflow', overflow);
-    } else if (overflow.length === 0 && this.host.hasAttribute('overflow')) {
+    } else {
       this.host.removeAttribute('overflow');
     }
   }

package/src/polylit-mixin.js

@@ -59,7 +59,7 @@ const PolylitMixinImplementation = (superclass) => {
         };
       }
 
-      if (options && options.reflectToAttribute) {
+      if (options?.reflectToAttribute) {
         options.reflect = true;
       }
 

package/src/resize-mixin.js

@@ -29,66 +29,66 @@ const observer = new ResizeObserver((entries) => {
  *
  * @polymerMixin
  */
-export const ResizeMixin = dedupeMixin(
-  (superclass) =>
-    class ResizeMixinClass extends superclass {
-      /**
-       * When true, the parent element resize will be also observed.
-       * Override this getter and return `true` to enable this.
-       *
-       * @protected
-       */
-      get _observeParent() {
-        return false;
-      }
-
-      /** @protected */
-      connectedCallback() {
-        super.connectedCallback();
-        observer.observe(this);
+const ResizeMixinImplementation = (superclass) =>
+  class ResizeMixinClass extends superclass {
+    /**
+     * When true, the parent element resize will be also observed.
+     * Override this getter and return `true` to enable this.
+     *
+     * @protected
+     */
+    get _observeParent() {
+      return false;
+    }
 
-        if (this._observeParent) {
-          const parent = this.parentNode instanceof ShadowRoot ? this.parentNode.host : this.parentNode;
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      observer.observe(this);
 
-          if (!parent.resizables) {
-            parent.resizables = new Set();
-            observer.observe(parent);
-          }
+      if (this._observeParent) {
+        const parent = this.parentNode instanceof ShadowRoot ? this.parentNode.host : this.parentNode;
 
-          parent.resizables.add(this);
-          this.__parent = parent;
+        if (!parent.resizables) {
+          parent.resizables = new Set();
+          observer.observe(parent);
         }
+
+        parent.resizables.add(this);
+        this.__parent = parent;
       }
+    }
 
-      /** @protected */
-      disconnectedCallback() {
-        super.disconnectedCallback();
-        observer.unobserve(this);
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      observer.unobserve(this);
 
-        const parent = this.__parent;
-        if (this._observeParent && parent) {
-          const resizables = parent.resizables;
+      const parent = this.__parent;
+      if (this._observeParent && parent) {
+        const resizables = parent.resizables;
 
-          if (resizables) {
-            resizables.delete(this);
+        if (resizables) {
+          resizables.delete(this);
 
-            if (resizables.size === 0) {
-              observer.unobserve(parent);
-            }
+          if (resizables.size === 0) {
+            observer.unobserve(parent);
           }
-
-          this.__parent = null;
         }
-      }
 
-      /**
-       * A handler invoked on host resize. By default, it does nothing.
-       * Override the method to implement your own behavior.
-       *
-       * @protected
-       */
-      _onResize(_contentRect) {
-        // To be implemented.
+        this.__parent = null;
       }
-    },
-);
+    }
+
+    /**
+     * A handler invoked on host resize. By default, it does nothing.
+     * Override the method to implement your own behavior.
+     *
+     * @protected
+     */
+    _onResize(_contentRect) {
+      // To be implemented.
+    }
+  };
+
+export const ResizeMixin = dedupeMixin(ResizeMixinImplementation);

package/src/slot-controller.js

@@ -223,7 +223,7 @@ export class SlotController extends EventTarget {
         });
       }
 
-      if (newNodes && newNodes.length > 0) {
+      if (newNodes?.length > 0) {
         if (this.multiple) {
           // Remove default node if exists
           if (this.defaultNode) {

package/src/slot-styles-mixin.js

@@ -42,35 +42,35 @@ function insertStyles(styles, root) {
  *
  * @polymerMixin
  */
-export const SlotStylesMixin = dedupeMixin(
-  (superclass) =>
-    class SlotStylesMixinClass extends superclass {
-      /**
-       * List of styles to insert into root.
-       * @protected
-       */
-      get slotStyles() {
-        return [];
-      }
+const SlotStylesMixinImplementation = (superclass) =>
+  class SlotStylesMixinClass extends superclass {
+    /**
+     * List of styles to insert into root.
+     * @protected
+     */
+    get slotStyles() {
+      return [];
+    }
 
-      /** @protected */
-      connectedCallback() {
-        super.connectedCallback();
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
 
-        this.__applySlotStyles();
-      }
+      this.__applySlotStyles();
+    }
 
-      /** @private */
-      __applySlotStyles() {
-        const root = this.getRootNode();
-        const rootStyles = getRootStyles(root);
+    /** @private */
+    __applySlotStyles() {
+      const root = this.getRootNode();
+      const rootStyles = getRootStyles(root);
 
-        this.slotStyles.forEach((styles) => {
-          if (!rootStyles.has(styles)) {
-            insertStyles(styles, root);
-            rootStyles.add(styles);
-          }
-        });
-      }
-    },
-);
+      this.slotStyles.forEach((styles) => {
+        if (!rootStyles.has(styles)) {
+          insertStyles(styles, root);
+          rootStyles.add(styles);
+        }
+      });
+    }
+  };
+
+export const SlotStylesMixin = dedupeMixin(SlotStylesMixinImplementation);

package/src/styles/style-props.js

@@ -119,6 +119,13 @@ addGlobalStyles(
         --safe-area-inset-right: env(safe-area-inset-right, 0px);
         --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
         --safe-area-inset-left: env(safe-area-inset-left, 0px);
+        --safe-area-inset-inline-start: var(--safe-area-inset-left);
+        --safe-area-inset-inline-end: var(--safe-area-inset-right);
+
+        &:dir(rtl) {
+          --safe-area-inset-inline-start: var(--safe-area-inset-right);
+          --safe-area-inset-inline-end: var(--safe-area-inset-left);
+        }
       }
 
       @supports not (color: hsl(0 0 0)) {

package/src/tooltip-controller.d.ts

@@ -42,12 +42,6 @@ export class TooltipController extends SlotController {
    */
   manual: boolean;
 
-  /**
-   * When true, the tooltip is opened programmatically.
-   * Only works if `manual` is set to `true`.
-   */
-  opened: boolean;
-
   /**
    * Position of the tooltip with respect to its target.
    */
@@ -74,11 +68,6 @@ export class TooltipController extends SlotController {
    */
   setManual(manual: boolean): void;
 
-  /**
-   * Toggle opened state on the slotted tooltip.
-   */
-  setOpened(opened: boolean): void;
-
   /**
    * Set default position for the slotted tooltip.
    * This can be overridden by setting the position
@@ -96,4 +85,18 @@ export class TooltipController extends SlotController {
    * Set an HTML element to attach the tooltip to.
    */
   setTarget(target: HTMLElement): void;
+
+  /**
+   * Schedule opening the slotted tooltip. Respects the tooltip's
+   * configured `hoverDelay` / `focusDelay` and the shared warm-up state.
+   * No-op when no tooltip is slotted.
+   */
+  open(options?: { hover?: boolean; focus?: boolean; immediate?: boolean }): void;
+
+  /**
+   * Schedule closing the slotted tooltip. Respects the tooltip's
+   * configured `hideDelay` unless `immediate` is true.
+   * No-op when no tooltip is slotted.
+   */
+  close(immediate?: boolean): void;
 }

package/src/tooltip-controller.js

@@ -39,10 +39,6 @@ export class TooltipController extends SlotController {
       tooltipNode.manual = this.manual;
     }
 
-    if (this.opened !== undefined) {
-      tooltipNode.opened = this.opened;
-    }
-
     if (this.position !== undefined) {
       tooltipNode._position = this.position;
     }
@@ -113,19 +109,6 @@ export class TooltipController extends SlotController {
     }
   }
 
-  /**
-   * Toggle opened state on the slotted tooltip.
-   * @param {boolean} opened
-   */
-  setOpened(opened) {
-    this.opened = opened;
-
-    const tooltipNode = this.node;
-    if (tooltipNode) {
-      tooltipNode.opened = opened;
-    }
-  }
-
   /**
    * Set default position for the slotted tooltip.
    * This can be overridden by setting the position
@@ -168,6 +151,34 @@ export class TooltipController extends SlotController {
     }
   }
 
+  /**
+   * Schedule opening the slotted tooltip. Respects the tooltip's
+   * configured `hoverDelay` / `focusDelay` and the shared warm-up state.
+   * No-op when no tooltip is slotted.
+   *
+   * @param {{ hover?: boolean, focus?: boolean, immediate?: boolean }} [options]
+   */
+  open(options) {
+    const tooltipNode = this.node;
+    if (tooltipNode?.isConnected) {
+      tooltipNode._stateController.open(options);
+    }
+  }
+
+  /**
+   * Schedule closing the slotted tooltip. Respects the tooltip's
+   * configured `hideDelay` unless `immediate` is true.
+   * No-op when no tooltip is slotted.
+   *
+   * @param {boolean} [immediate]
+   */
+  close(immediate) {
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode._stateController.close(immediate);
+    }
+  }
+
   /** @private */
   __onContentChange(event) {
     this.__notifyChange(event.target);

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

@@ -78,8 +78,6 @@ export class IronListAdapter {
     });
     attachObserver.observe(this.scrollTarget);
 
-    this._scrollLineHeight = this._getScrollLineHeight();
-
     this.scrollTarget.addEventListener('virtualizer-element-focused', (e) => this.__onElementFocused(e));
     this.elementsContainer.addEventListener('focusin', () => {
       this.scrollTarget.dispatchEvent(
@@ -462,10 +460,6 @@ export class IronListAdapter {
     this._isRTL = Boolean(styles.direction === 'rtl');
     this._viewportWidth = this.elementsContainer.offsetWidth;
     this._viewportHeight = this.scrollTarget.offsetHeight;
-    this._scrollPageHeight = this._viewportHeight - this._scrollLineHeight;
-    if (this.grid) {
-      this._updateGridMetrics();
-    }
   }
 
   /** @private */
@@ -780,20 +774,6 @@ export class IronListAdapter {
     return 0;
   }
 
-  /**
-   * @returns {Number|undefined} - The browser's default font-size in pixels
-   * @private
-   */
-  _getScrollLineHeight() {
-    const el = document.createElement('div');
-    el.style.fontSize = 'initial';
-    el.style.display = 'none';
-    document.body.appendChild(el);
-    const fontSize = window.getComputedStyle(el).fontSize;
-    document.body.removeChild(el);
-    return fontSize ? window.parseInt(fontSize) : undefined;
-  }
-
   __getVisibleElements() {
     return Array.from(this.elementsContainer.children).filter((element) => !element.hidden);
   }