@vaadin/field-base 25.3.0-alpha2 → 25.3.0-alpha4

package/custom-elements.json

@@ -150,7 +150,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
+              "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
               "attribute": "clear-button-visible"
             },
             {
@@ -174,7 +174,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
+              "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
               "fieldName": "clearButtonVisible"
             },
             {
@@ -782,7 +782,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
+              "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
               "attribute": "clear-button-visible",
               "inheritedFrom": {
                 "name": "ClearButtonMixin",
@@ -1014,7 +1014,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
+              "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
               "fieldName": "clearButtonVisible",
               "inheritedFrom": {
                 "name": "ClearButtonMixin",
@@ -1355,7 +1355,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
+              "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
               "attribute": "clear-button-visible",
               "inheritedFrom": {
                 "name": "ClearButtonMixin",
@@ -1635,7 +1635,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
+              "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
               "fieldName": "clearButtonVisible",
               "inheritedFrom": {
                 "name": "ClearButtonMixin",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "25.3.0-alpha2",
+  "version": "25.3.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -32,17 +32,17 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-alpha2",
-    "@vaadin/component-base": "25.3.0-alpha2",
+    "@vaadin/a11y-base": "25.3.0-alpha4",
+    "@vaadin/component-base": "25.3.0-alpha4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.3.0-alpha2",
-    "@vaadin/input-container": "25.3.0-alpha2",
-    "@vaadin/test-runner-commands": "25.3.0-alpha2",
+    "@vaadin/chai-plugins": "25.3.0-alpha4",
+    "@vaadin/input-container": "25.3.0-alpha4",
+    "@vaadin/test-runner-commands": "25.3.0-alpha4",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "52eba6153ecf8bfaae44bcb727595e77d90b963c"
+  "gitHead": "ff0efcd52d3b8a081e8101d36cf7bef65ed71cb1"
 }

package/src/clear-button-mixin.d.ts

@@ -17,10 +17,7 @@ export declare function ClearButtonMixin<T extends Constructor<HTMLElement>>(
 export declare class ClearButtonMixinClass {
   /**
    * Set to true to display the clear icon which clears the input.
-   *
-   * It is up to the component to choose where to place the clear icon:
-   * in the Shadow DOM or in the light DOM. In any way, a reference to
-   * the clear icon element should be provided via the `clearElement` getter.
+   * This also enables clearing the input when pressing Esc key.
    *
    * @attr {boolean} clear-button-visible
    */

package/src/clear-button-mixin.js

@@ -17,10 +17,7 @@ export const ClearButtonMixin = (superclass) =>
       return {
         /**
          * Set to true to display the clear icon which clears the input.
-         *
-         * It is up to the component to choose where to place the clear icon:
-         * in the Shadow DOM or in the light DOM. In any way, a reference to
-         * the clear icon element should be provided via the `clearElement` getter.
+         * This also enables clearing the input when pressing Esc key.
          *
          * @attr {boolean} clear-button-visible
          */

package/src/styles/checkable-base-styles.js

@@ -18,10 +18,6 @@ export const checkable = (part, propName = part) => css`
     --_cursor: var(--vaadin-clickable-cursor);
   }
 
-  :host([disabled]) {
-    --_cursor: var(--vaadin-disabled-cursor);
-  }
-
   :host(:not([has-label])) {
     column-gap: 0;
   }
@@ -109,10 +105,24 @@ export const checkable = (part, propName = part) => css`
     --vaadin-${unsafeCSS(propName)}-border-color: transparent;
   }
 
+  :host([readonly]) {
+    --vaadin-${unsafeCSS(part)}-background: transparent;
+    --vaadin-${unsafeCSS(part)}-border-color: var(--vaadin-border-color);
+    --vaadin-${unsafeCSS(part)}-marker-color: var(--vaadin-text-color);
+    --_border-style: dashed;
+    --_cursor: var(--vaadin-disabled-cursor);
+
+    [part='label'],
+    ::slotted(label) {
+      cursor: default;
+    }
+  }
+
   :host([disabled]) {
     --vaadin-${unsafeCSS(propName)}-background: var(--vaadin-input-field-disabled-background, var(--vaadin-background-container-strong));
     --vaadin-${unsafeCSS(propName)}-border-color: transparent;
     --vaadin-${unsafeCSS(propName)}-marker-color: var(--vaadin-text-color-disabled);
+    --_cursor: var(--vaadin-disabled-cursor);
   }
 
   /* Focus ring */
@@ -146,6 +156,30 @@ export const checkable = (part, propName = part) => css`
     opacity: 0;
   }
 
+  /* Reverse variant */
+  :host([theme~='reverse']) {
+    grid-template-columns: 1fr auto;
+
+    &::before {
+      display: none;
+    }
+
+    [part='label'],
+    [part='helper-text'],
+    [part='error-message'] {
+      grid-column: 1;
+    }
+
+    [part='${unsafeCSS(part)}'],
+    ::slotted(input) {
+      grid-column: 2;
+    }
+
+    ::slotted(input) {
+      margin-inline: calc(min(0px, (24px - 100%) / -2) - var(--vaadin-${unsafeCSS(propName)}-gap, var(--vaadin-gap-s))) 0 !important;
+    }
+  }
+
   @media (forced-colors: active) {
     :host(:is([checked], [indeterminate])) {
       --vaadin-${unsafeCSS(propName)}-border-color: CanvasText !important;