@vaadin/field-base 23.1.7 → 23.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "23.1.7",
+  "version": "23.1.9",
   "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.7",
+    "@vaadin/component-base": "~23.1.9",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "879a4e5e6a245809bafa0ef2b5cdb24aef72565d"
+  "gitHead": "ad8461e09f049c3f04f50278d38d0f5a98604904"
 }

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

@@ -14,6 +14,7 @@ import { FieldMixinClass } from './field-mixin.js';
 import { InputConstraintsMixinClass } from './input-constraints-mixin.js';
 import { InputMixinClass } from './input-mixin.js';
 import { LabelMixinClass } from './label-mixin.js';
+import { SlotStylesMixinClass } from './slot-styles-mixin.js';
 import { 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;
 

package/src/input-control-mixin.js

@@ -7,6 +7,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.
@@ -16,10 +17,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 {
@@ -91,6 +93,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 { InputConstraintsMixinClass } from './input-constraints-mixin.js';
 import { InputControlMixinClass } from './input-control-mixin.js';
 import { InputMixinClass } from './input-mixin.js';
 import { LabelMixinClass } from './label-mixin.js';
+import { SlotStylesMixinClass } from './slot-styles-mixin.js';
 import { 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;