@vaadin/field-base 23.1.2 → 23.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "23.1.2",
+  "version": "23.1.5",
   "publishConfig": {
     "access": "public"
   },
@@ -32,7 +32,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.1.2",
+    "@vaadin/component-base": "^23.1.5",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "6fb205c6e9a761feadfb779dd5d7af96d3102e56"
+  "gitHead": "326938919a54353231af25d341ba6076c249afee"
 }

package/src/checked-mixin.d.ts

@@ -13,11 +13,11 @@ import { InputMixinClass } from './input-mixin.js';
  */
 export declare function CheckedMixin<T extends Constructor<object>>(
   base: T,
-): T &
-  Constructor<CheckedMixinClass> &
+): Constructor<CheckedMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
-  Constructor<InputMixinClass>;
+  Constructor<InputMixinClass> &
+  T;
 
 export declare class CheckedMixinClass {
   /**

package/src/checked-mixin.js

@@ -5,6 +5,7 @@
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
+import { isElementFocused } from '@vaadin/component-base/src/focus-utils.js';
 import { DelegateStateMixin } from './delegate-state-mixin.js';
 import { InputMixin } from './input-mixin.js';
 
@@ -43,7 +44,15 @@ export const CheckedMixin = dedupingMixin(
        * @override
        */
       _onChange(event) {
-        this._toggleChecked(event.target.checked);
+        const input = event.target;
+
+        this._toggleChecked(input.checked);
+
+        // Clicking the checkbox or radio-button in Safari
+        // does not make it focused, so we do it manually.
+        if (!isElementFocused(input)) {
+          input.focus();
+        }
       }
 
       /** @protected */

package/src/delegate-focus-mixin.d.ts

@@ -13,11 +13,11 @@ import { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js
  */
 export declare function DelegateFocusMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<DelegateFocusMixinClass> &
+): Constructor<DelegateFocusMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<FocusMixinClass> &
-  Constructor<TabindexMixinClass>;
+  Constructor<TabindexMixinClass> &
+  T;
 
 export declare class DelegateFocusMixinClass {
   /**

package/src/delegate-state-mixin.d.ts

@@ -10,7 +10,7 @@ import { Constructor } from '@open-wc/dedupe-mixin';
  */
 export declare function DelegateStateMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<DelegateStateMixinClass>;
+): Constructor<DelegateStateMixinClass> & T;
 
 export declare class DelegateStateMixinClass {
   /**

package/src/field-aria-controller.js

@@ -139,7 +139,7 @@ export class FieldAriaController {
       return;
     }
 
-    if (!this.__isGroupField) {
+    if (['input', 'textarea'].includes(this.__target.localName)) {
       // Native <input> or <textarea>, required is enough
       return;
     }

package/src/field-mixin.d.ts

@@ -13,11 +13,11 @@ import { ValidateMixinClass } from './validate-mixin.js';
  */
 export declare function FieldMixin<T extends Constructor<HTMLElement>>(
   superclass: T,
-): T &
-  Constructor<ControllerMixinClass> &
+): Constructor<ControllerMixinClass> &
   Constructor<FieldMixinClass> &
   Constructor<LabelMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class FieldMixinClass {
   /**

package/src/input-constraints-mixin.d.ts

@@ -14,12 +14,12 @@ import { ValidateMixinClass } from './validate-mixin.js';
  */
 export declare function InputConstraintsMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<DelegateStateMixinClass> &
+): Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class InputConstraintsMixinClass {
   /**

package/src/input-control-mixin.d.ts

@@ -21,8 +21,7 @@ import { ValidateMixinClass } from './validate-mixin.js';
  */
 export declare function InputControlMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<ControllerMixinClass> &
+): Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
@@ -33,7 +32,8 @@ export declare function InputControlMixin<T extends Constructor<HTMLElement>>(
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class InputControlMixinClass {
   /**

package/src/input-field-mixin.d.ts

@@ -22,8 +22,7 @@ import { ValidateMixinClass } from './validate-mixin.js';
  */
 export declare function InputFieldMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<ControllerMixinClass> &
+): Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
@@ -35,7 +34,8 @@ export declare function InputFieldMixin<T extends Constructor<HTMLElement>>(
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class InputFieldMixinClass {
   /**
@@ -52,7 +52,7 @@ export declare class InputFieldMixinClass {
    * on: Enable autocorrection.
    * off: Disable autocorrection.
    */
-  autocorrect: 'on' | 'off' | undefined;
+  autocorrect: 'off' | 'on' | undefined;
 
   /**
    * This is a property supported by Safari and Chrome that is used to control whether
@@ -63,5 +63,5 @@ export declare class InputFieldMixinClass {
    * sentences: Sentences capitalization.
    * none: No capitalization.
    */
-  autocapitalize: 'on' | 'off' | 'none' | 'characters' | 'words' | 'sentences' | undefined;
+  autocapitalize: 'characters' | 'none' | 'off' | 'on' | 'sentences' | 'words' | undefined;
 }

package/src/input-mixin.d.ts

@@ -9,7 +9,7 @@ import { Constructor } from '@open-wc/dedupe-mixin';
  * A mixin to store the reference to an input element
  * and add input and change event listeners to it.
  */
-export declare function InputMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<InputMixinClass>;
+export declare function InputMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<InputMixinClass> & T;
 
 export declare class InputMixinClass {
   /**

package/src/label-mixin.d.ts

@@ -9,7 +9,7 @@ import { LabelController } from './label-controller.js';
 /**
  * A mixin to provide label via corresponding property or named slot.
  */
-export declare function LabelMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<LabelMixinClass>;
+export declare function LabelMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<LabelMixinClass> & T;
 
 export declare class LabelMixinClass {
   /**

package/src/pattern-mixin.d.ts

@@ -15,13 +15,13 @@ import { ValidateMixinClass } from './validate-mixin.js';
  */
 export declare function PatternMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<DelegateStateMixinClass> &
+): Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<PatternMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class PatternMixinClass {
   /**

package/src/shadow-focus-mixin.d.ts

@@ -15,9 +15,9 @@ import { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
  */
 export declare function ShadowFocusMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<DelegateFocusMixinClass> &
+): Constructor<DelegateFocusMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<FocusMixinClass> &
   Constructor<KeyboardMixinClass> &
-  Constructor<TabindexMixinClass>;
+  Constructor<TabindexMixinClass> &
+  T;

package/src/slot-styles-mixin.d.ts

@@ -11,7 +11,7 @@ import { Constructor } from '@open-wc/dedupe-mixin';
  */
 export declare function SlotStylesMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<SlotStylesMixinClass>;
+): Constructor<SlotStylesMixinClass> & T;
 
 export declare class SlotStylesMixinClass {
   /**

package/src/validate-mixin.d.ts

@@ -8,7 +8,7 @@ import { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin to provide required state and validation logic.
  */
-export declare function ValidateMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ValidateMixinClass>;
+export declare function ValidateMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ValidateMixinClass> & T;
 
 export declare class ValidateMixinClass {
   /**

package/src/virtual-keyboard-controller.d.ts

@@ -10,5 +10,5 @@ import { ReactiveController } from 'lit';
  * when the field's overlay is closed.
  */
 export class VirtualKeyboardController implements ReactiveController {
-  constructor(host: { inputElement?: HTMLElement; opened: boolean } & HTMLElement);
+  constructor(host: HTMLElement & { inputElement?: HTMLElement; opened: boolean });
 }