@vaadin/component-base 23.0.0-alpha4 → 23.0.0-beta3

package/index.d.ts

@@ -6,6 +6,7 @@ export { ElementMixin } from './src/element-mixin.js';
 export { FocusMixin } from './src/focus-mixin.js';
 export { FocusTrapController } from './src/focus-trap-controller.js';
 export { KeyboardMixin } from './src/keyboard-mixin.js';
+export { ResizeMixin } from './src/resize-mixin.js';
 export { SlotController } from './src/slot-controller.js';
 export { SlotMixin } from './src/slot-mixin.js';
 export { TabindexMixin } from './src/tabindex-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.0.0-alpha4",
+  "version": "23.0.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.4"
   },
-  "gitHead": "81e2deee5147bb7c1f4884760f4598613306f1fb"
+  "gitHead": "4c87216666541f9eb58f56c475964727822aad53"
 }

package/src/a11y-announcer.d.ts

@@ -7,4 +7,4 @@
 /**
  * Cause a text string to be announced by screen readers.
  */
-export function announce(text: string, options?: { mode?: 'polite' | 'assertive'; timeout?: number }): void;
+export function announce(text: string, options?: { mode?: 'polite' | 'assertive' | 'alert'; timeout?: number }): void;

package/src/a11y-announcer.js

@@ -4,6 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+import { animationFrame } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+
 const region = document.createElement('div');
 
 region.style.position = 'fixed';
@@ -12,6 +15,7 @@ region.setAttribute('aria-live', 'polite');
 
 document.body.appendChild(region);
 
+let alertDebouncer;
 /**
  * Cause a text string to be announced by screen readers.
  *
@@ -22,7 +26,19 @@ export function announce(text, options = {}) {
   const mode = options.mode || 'polite';
   const timeout = options.timeout === undefined ? 150 : options.timeout;
 
-  region.setAttribute('aria-live', mode);
+  if (mode === 'alert') {
+    region.removeAttribute('aria-live');
+    region.removeAttribute('role');
+    alertDebouncer = Debouncer.debounce(alertDebouncer, animationFrame, () => {
+      region.setAttribute('role', 'alert');
+    });
+  } else {
+    if (alertDebouncer) {
+      alertDebouncer.cancel();
+    }
+    region.removeAttribute('role');
+    region.setAttribute('aria-live', mode);
+  }
 
   region.textContent = '';
 

package/src/element-mixin.js

@@ -32,7 +32,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '23.0.0-alpha4';
+      return '23.0.0-beta3';
     }
 
     /** @protected */

package/src/focus-trap-controller.js

@@ -134,6 +134,7 @@ export class FocusTrapController {
    * @private
    */
   get __focusedElementIndex() {
-    return this.__focusableElements.findIndex(isElementFocused);
+    const focusableElements = this.__focusableElements;
+    return focusableElements.indexOf(focusableElements.filter(isElementFocused).pop());
   }
 }

package/src/focus-utils.js

@@ -39,7 +39,7 @@ function isElementHiddenDirectly(element) {
  * @return {number}
  */
 function normalizeTabIndex(element) {
-  if (!isElementFocusable(element) || isElementHiddenDirectly(element)) {
+  if (!isElementFocusable(element)) {
     return -1;
   }
 
@@ -116,8 +116,8 @@ function sortElementsByTabIndex(elements) {
  * @private
  */
 function collectFocusableNodes(node, result) {
-  if (node.nodeType !== Node.ELEMENT_NODE) {
-    // Don't traverse children if the node is not an HTML element.
+  if (node.nodeType !== Node.ELEMENT_NODE || isElementHiddenDirectly(node)) {
+    // Don't traverse children if the node is not an HTML element or not visible.
     return false;
   }
 

package/src/media-query-controller.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ReactiveController } from 'lit';
+
+/**
+ * A controller for listening on media query changes.
+ */
+export class MediaQueryController implements ReactiveController {
+  /**
+   * @param {HTMLElement} host
+   */
+  constructor(query: string, callback: (matches: boolean) => void);
+
+  hostConnected(): void;
+
+  hostDisconnected(): void;
+
+  /**
+   * The CSS media query to evaluate.
+   */
+  protected query: string;
+
+  /**
+   * Function to call when media query changes.
+   */
+  protected callback: (matches: boolean) => void;
+}

package/src/media-query-controller.js

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller for listening on media query changes.
+ */
+export class MediaQueryController {
+  constructor(query, callback) {
+    /**
+     * The CSS media query to evaluate.
+     *
+     * @type {string}
+     * @protected
+     */
+    this.query = query;
+
+    /**
+     * Function to call when media query changes.
+     *
+     * @type {Function}
+     * @protected
+     */
+    this.callback = callback;
+
+    this._boundQueryHandler = this._queryHandler.bind(this);
+  }
+
+  hostConnected() {
+    this._removeListener();
+
+    this._mediaQuery = window.matchMedia(this.query);
+
+    this._addListener();
+
+    this._queryHandler(this._mediaQuery);
+  }
+
+  hostDisconnected() {
+    this._removeListener();
+  }
+
+  /** @private */
+  _addListener() {
+    if (this._mediaQuery) {
+      this._mediaQuery.addListener(this._boundQueryHandler);
+    }
+  }
+
+  /** @private */
+  _removeListener() {
+    if (this._mediaQuery) {
+      this._mediaQuery.removeListener(this._boundQueryHandler);
+    }
+
+    this._mediaQuery = null;
+  }
+
+  /** @private */
+  _queryHandler(mediaQuery) {
+    if (typeof this.callback === 'function') {
+      this.callback(mediaQuery.matches);
+    }
+  }
+}

package/src/slot-controller.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 
 /**
@@ -30,10 +31,13 @@ export class SlotController extends EventTarget {
   static generateId(slotName, host) {
     const prefix = slotName || 'default';
 
+    // Support dash-case slot names e.g. "error-message"
+    const field = `${dashToCamelCase(prefix)}Id`;
+
     // Maintain the unique ID counter for a given prefix.
-    this[`${prefix}Id`] = 1 + this[`${prefix}Id`] || 0;
+    this[field] = 1 + this[field] || 0;
 
-    return `${prefix}-${host.localName}-${this[`${prefix}Id`]}`;
+    return `${prefix}-${host.localName}-${this[field]}`;
   }
 
   hostConnected() {

package/src/tabindex-mixin.js

@@ -56,7 +56,9 @@ export const TabindexMixin = (superclass) =>
       super._disabledChanged(disabled, oldDisabled);
 
       if (disabled) {
-        this.__lastTabIndex = this.tabindex;
+        if (this.tabindex !== undefined) {
+          this.__lastTabIndex = this.tabindex;
+        }
         this.tabindex = -1;
       } else if (oldDisabled) {
         this.tabindex = this.__lastTabIndex;