@vaadin/custom-field 25.0.0-alpha10 → 25.0.0-alpha12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/custom-field",
-  "version": "25.0.0-alpha10",
+  "version": "25.0.0-alpha12",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -37,32 +34,32 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha10",
-    "@vaadin/component-base": "25.0.0-alpha10",
-    "@vaadin/field-base": "25.0.0-alpha10",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
+    "@vaadin/a11y-base": "25.0.0-alpha12",
+    "@vaadin/component-base": "25.0.0-alpha12",
+    "@vaadin/field-base": "25.0.0-alpha12",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha12",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha10",
-    "@vaadin/combo-box": "25.0.0-alpha10",
-    "@vaadin/date-picker": "25.0.0-alpha10",
-    "@vaadin/email-field": "25.0.0-alpha10",
-    "@vaadin/form-layout": "25.0.0-alpha10",
-    "@vaadin/number-field": "25.0.0-alpha10",
-    "@vaadin/password-field": "25.0.0-alpha10",
-    "@vaadin/select": "25.0.0-alpha10",
-    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/chai-plugins": "25.0.0-alpha12",
+    "@vaadin/combo-box": "25.0.0-alpha12",
+    "@vaadin/date-picker": "25.0.0-alpha12",
+    "@vaadin/email-field": "25.0.0-alpha12",
+    "@vaadin/form-layout": "25.0.0-alpha12",
+    "@vaadin/number-field": "25.0.0-alpha12",
+    "@vaadin/password-field": "25.0.0-alpha12",
+    "@vaadin/select": "25.0.0-alpha12",
+    "@vaadin/test-runner-commands": "25.0.0-alpha12",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/text-area": "25.0.0-alpha10",
-    "@vaadin/text-field": "25.0.0-alpha10",
-    "@vaadin/time-picker": "25.0.0-alpha10",
+    "@vaadin/text-area": "25.0.0-alpha12",
+    "@vaadin/text-field": "25.0.0-alpha12",
+    "@vaadin/time-picker": "25.0.0-alpha12",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha12",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
+  "gitHead": "e75527348f9ba7c363d068c868b9f030c15b84a1"
 }

package/src/vaadin-custom-field.js

@@ -9,7 +9,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { customFieldStyles } from './styles/vaadin-custom-field-core-styles.js';
+import { customFieldStyles } from './styles/vaadin-custom-field-base-styles.js';
 import { CustomFieldMixin } from './vaadin-custom-field-mixin.js';
 
 /**

package/vaadin-custom-field.js

@@ -1,3 +1,3 @@
-import './theme/lumo/vaadin-custom-field.js';
+import './src/vaadin-custom-field.js';
 
 export * from './src/vaadin-custom-field.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/custom-field",
-  "version": "25.0.0-alpha10",
+  "version": "25.0.0-alpha12",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -111,7 +111,7 @@
             },
             {
               "name": "value",
-              "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
+              "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha12/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha12/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
               "value": {
                 "type": [
                   "string",
@@ -235,7 +235,7 @@
               },
               {
                 "name": "value",
-                "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
+                "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha12/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha12/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
                 "value": {
                   "type": [
                     "string",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/custom-field",
-  "version": "25.0.0-alpha10",
+  "version": "25.0.0-alpha12",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -84,7 +84,7 @@
             },
             {
               "name": ".value",
-              "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha10/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
+              "description": "The value of the field. When wrapping several inputs, it will contain `\\t`\n(Tab character) as a delimiter indicating parts intended to be used as the\ncorresponding inputs values.\nUse the [`formatValue`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha12/#/elements/vaadin-custom-field#property-formatValue)\nand [`parseValue`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha12/#/elements/vaadin-custom-field#property-parseValue)\nproperties to customize this behavior.",
               "value": {
                 "kind": "expression"
               }

package/src/styles/vaadin-custom-field-core-styles.d.ts

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { CSSResult } from 'lit';
-
-export const customFieldStyles: CSSResult;

package/src/styles/vaadin-custom-field-core-styles.js

@@ -1,34 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from 'lit';
-
-export const customFieldStyles = css`
-  :host {
-    display: inline-flex;
-  }
-
-  :host::before {
-    content: '\\2003';
-    width: 0;
-    display: inline-block;
-    /* Size and position this element on the same vertical position as the input-field element
-           to make vertical align for the host element work as expected */
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  .vaadin-custom-field-container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .inputs-wrapper {
-    flex: none;
-  }
-`;

package/theme/lumo/vaadin-custom-field-styles.d.ts

@@ -1,11 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-declare const customField: import("lit").CSSResult;
-export { customField };

package/theme/lumo/vaadin-custom-field-styles.js

@@ -1,97 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { helper } from '@vaadin/vaadin-lumo-styles/mixins/helper.js';
-import { requiredField } from '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const customField = css`
-  :host {
-    --lumo-text-field-size: var(--lumo-size-m);
-    color: var(--lumo-body-text-color);
-    font-size: var(--lumo-font-size-m);
-    /* align with text-field height + vertical paddings */
-    line-height: calc(var(--lumo-text-field-size) + 2 * var(--lumo-space-xs));
-    font-family: var(--lumo-font-family);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-tap-highlight-color: transparent;
-    padding: 0;
-  }
-
-  :host::before {
-    margin-top: var(--lumo-space-xs);
-    height: var(--lumo-text-field-size);
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  /* align with text-field label */
-  :host([has-label]) [part='label'] {
-    padding-bottom: calc(0.5em - var(--lumo-space-xs));
-  }
-
-  :host(:not([has-label])) [part='label'],
-  :host(:not([has-label]))::before {
-    display: none;
-  }
-
-  /* align with text-field error message */
-  :host([has-error-message]) [part='error-message']::before {
-    height: calc(0.4em - var(--lumo-space-xs));
-  }
-
-  :host([focused]:not([readonly]):not([disabled])) [part='label'] {
-    color: var(--lumo-primary-text-color);
-  }
-
-  :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'],
-  :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='helper-text'] {
-    color: var(--lumo-body-text-color);
-  }
-
-  /* Touch device adjustment */
-  @media (pointer: coarse) {
-    :host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'] {
-      color: var(--lumo-secondary-text-color);
-    }
-  }
-
-  /* Disabled */
-  :host([disabled]) [part='label'] {
-    color: var(--lumo-disabled-text-color);
-    -webkit-text-fill-color: var(--lumo-disabled-text-color);
-  }
-
-  /* Small theme */
-  :host([theme~='small']) {
-    font-size: var(--lumo-font-size-s);
-    --lumo-text-field-size: var(--lumo-size-s);
-  }
-
-  :host([theme~='small'][has-label]) [part='label'] {
-    font-size: var(--lumo-font-size-xs);
-  }
-
-  :host([theme~='small'][has-label]) [part='error-message'] {
-    font-size: var(--lumo-font-size-xxs);
-  }
-
-  /* When custom-field is used with components without outer margin */
-  :host([theme~='whitespace'][has-label]) [part='label'] {
-    padding-bottom: 0.5em;
-  }
-`;
-
-registerStyles('vaadin-custom-field', [requiredField, helper, customField], {
-  moduleId: 'lumo-custom-field',
-});
-
-export { customField };

package/theme/lumo/vaadin-custom-field.d.ts

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-custom-field-styles.js';
-import '../../src/vaadin-custom-field.js';

package/theme/lumo/vaadin-custom-field.js

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-custom-field-styles.js';
-import '../../src/vaadin-custom-field.js';