@vaadin/field-base 23.2.0 → 23.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "23.2.0",
+  "version": "23.2.2",
   "publishConfig": {
     "access": "public"
   },
@@ -32,7 +32,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.2.0",
+    "@vaadin/component-base": "~23.2.2",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8b1f5941f26ac41ca038e75e24c8584e331bc7a8"
+  "gitHead": "a98818979098f4542ce557a58858fb6dad910a25"
 }

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

@@ -14,6 +14,7 @@ import type { FieldMixinClass } from './field-mixin.js';
 import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
 import type { InputMixinClass } from './input-mixin.js';
 import type { LabelMixinClass } from './label-mixin.js';
+import type { SlotStylesMixinClass } from './slot-styles-mixin.js';
 import type { ValidateMixinClass } from './validate-mixin.js';
 
 /**
@@ -32,6 +33,7 @@ export declare function InputControlMixin<T extends Constructor<HTMLElement>>(
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
+  Constructor<SlotStylesMixinClass> &
   Constructor<ValidateMixinClass> &
   T;
 
@@ -46,6 +48,7 @@ export declare class InputControlMixinClass {
    *
    * For example, to allow entering only numbers and minus signs, use:
    * `allowedCharPattern = "[\\d-]"`
+   * @attr {string} allowed-char-pattern
    */
   allowedCharPattern: string;
 

package/src/input-control-mixin.js

@@ -9,6 +9,7 @@ import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { DelegateFocusMixin } from './delegate-focus-mixin.js';
 import { FieldMixin } from './field-mixin.js';
 import { InputConstraintsMixin } from './input-constraints-mixin.js';
+import { SlotStylesMixin } from './slot-styles-mixin.js';
 
 /**
  * A mixin to provide shared logic for the editable form input controls.
@@ -18,10 +19,11 @@ import { InputConstraintsMixin } from './input-constraints-mixin.js';
  * @mixes FieldMixin
  * @mixes InputConstraintsMixin
  * @mixes KeyboardMixin
+ * @mixes SlotStylesMixin
  */
 export const InputControlMixin = (superclass) =>
-  class InputControlMixinClass extends DelegateFocusMixin(
-    InputConstraintsMixin(FieldMixin(KeyboardMixin(superclass))),
+  class InputControlMixinClass extends SlotStylesMixin(
+    DelegateFocusMixin(InputConstraintsMixin(FieldMixin(KeyboardMixin(superclass)))),
   ) {
     static get properties() {
       return {
@@ -35,6 +37,7 @@ export const InputControlMixin = (superclass) =>
          *
          * For example, to allow entering only numbers and minus signs, use:
          * `allowedCharPattern = "[\\d-]"`
+         * @attr {string} allowed-char-pattern
          */
         allowedCharPattern: {
           type: String,
@@ -117,6 +120,19 @@ export const InputControlMixin = (superclass) =>
       return null;
     }
 
+    /** @protected */
+    get slotStyles() {
+      // Needed for Safari, where ::slotted(...)::placeholder does not work
+      return [
+        `
+          :is(input[slot='input'], textarea[slot='textarea'])::placeholder {
+            font: inherit;
+            color: inherit;
+          }
+        `,
+      ];
+    }
+
     /** @protected */
     ready() {
       super.ready();

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

@@ -15,6 +15,7 @@ import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
 import type { InputControlMixinClass } from './input-control-mixin.js';
 import type { InputMixinClass } from './input-mixin.js';
 import type { LabelMixinClass } from './label-mixin.js';
+import type { SlotStylesMixinClass } from './slot-styles-mixin.js';
 import type { ValidateMixinClass } from './validate-mixin.js';
 
 /**
@@ -34,6 +35,7 @@ export declare function InputFieldMixin<T extends Constructor<HTMLElement>>(
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
+  Constructor<SlotStylesMixinClass> &
   Constructor<ValidateMixinClass> &
   T;