experiment: add cursor properties for interactive elements (#9190)

Author: web-padawan

packages/button/src/vaadin-button-base-styles.js

@@ -18,7 +18,7 @@ export const buttonStyles = css`
       -webkit-tap-highlight-color: transparent;
       -webkit-user-select: none;
       user-select: none;
-      cursor: pointer;
+      cursor: var(--vaadin-clickable-cursor);
       box-sizing: border-box;
       vertical-align: middle;
       flex-shrink: 0;
@@ -70,7 +70,7 @@ export const buttonStyles = css`
 
     :host([disabled]) {
       pointer-events: var(--_vaadin-button-disabled-pointer-events, none);
-      cursor: not-allowed;
+      cursor: var(--vaadin-disabled-cursor);
       opacity: 0.5;
     }
 

packages/component-base/src/style-props.js

@@ -57,6 +57,10 @@ addGlobalThemeStyles(
         --_vaadin-icon-minus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');
         --_vaadin-icon-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>');
         --_vaadin-icon-warn: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>');
+
+        /* Cursors for interactive elements */
+        --vaadin-clickable-cursor: pointer;
+        --vaadin-disabled-cursor: not-allowed;
       }
 
       @media (forced-colors: active) {

packages/details/src/vaadin-details-summary-base-styles.js

@@ -15,6 +15,7 @@ export const detailsSummary = (partName = 'vaadin-details-summary') => css`
     border-radius: var(--${unsafeCSS(partName)}-border-radius, var(--_vaadin-radius-m));
     box-sizing: border-box;
     color: var(--${unsafeCSS(partName)}-text-color, var(--_vaadin-color-strong));
+    cursor: var(--vaadin-clickable-cursor);
     display: flex;
     font-size: var(--${unsafeCSS(partName)}-font-size, inherit);
     font-weight: var(--${unsafeCSS(partName)}-font-weight, 500);
@@ -66,7 +67,7 @@ export const detailsSummary = (partName = 'vaadin-details-summary') => css`
 
   :host([disabled]) {
     opacity: 0.5;
-    cursor: not-allowed;
+    cursor: var(--vaadin-disabled-cursor);
   }
 
   :host([dir='rtl']) [part='toggle']::before {

packages/field-base/src/styles/button-base-styles.js

@@ -9,6 +9,7 @@ import { css } from 'lit';
 export const button = css`
   [part$='button'] {
     color: var(--_vaadin-color);
+    cursor: var(--vaadin-clickable-cursor);
     touch-action: manipulation;
     -webkit-tap-highlight-color: transparent;
     -webkit-user-select: none;
@@ -34,7 +35,7 @@ export const button = css`
 
   :host(:is([readonly], [disabled])) [part$='button'] {
     color: var(--_vaadin-color-subtle);
-    cursor: not-allowed;
+    cursor: var(--vaadin-disabled-cursor);
   }
 
   @media (forced-colors: active) {

packages/field-base/src/styles/field-base-styles.js

@@ -50,6 +50,14 @@ export const field = css`
     display: none;
   }
 
+  :host([readonly]) [part='input-field'] {
+    cursor: default;
+  }
+
+  :host([disabled]) [part='input-field'] {
+    cursor: var(--vaadin-disabled-cursor);
+  }
+
   [part='helper-text'] {
     font-size: var(--vaadin-input-field-helper-font-size, inherit);
     line-height: var(--vaadin-input-field-helper-line-height, inherit);

packages/input-container/src/vaadin-input-container-base-styles.js

@@ -21,6 +21,7 @@ export const inputContainerStyles = css`
     border: var(--vaadin-input-field-border-width, 1px) solid
       var(--vaadin-input-field-border-color, var(--_vaadin-border-color-strong));
     box-sizing: border-box;
+    cursor: text;
     padding: var(--vaadin-input-field-padding, var(--_vaadin-padding-container));
     gap: var(--vaadin-input-field-gap, var(--_vaadin-gap-container-inline));
     background: var(--vaadin-input-field-background, var(--_vaadin-background));
@@ -61,12 +62,17 @@ export const inputContainerStyles = css`
     font: inherit;
     color: inherit;
     background: transparent;
+    cursor: inherit;
   }
 
   ::slotted(*) {
     flex: none;
   }
 
+  slot {
+    cursor: auto;
+  }
+
   ::slotted(:is(input, textarea))::placeholder {
     /* Use ::slotted(input:placeholder-shown) in themes to style the placeholder. */
     /* because ::slotted(...)::placeholder does not work in Safari. */

packages/item/src/vaadin-item-base-styles.js

@@ -12,7 +12,7 @@ export const itemStyles = css`
       align-items: center;
       border-radius: var(--vaadin-item-border-radius, var(--_vaadin-radius-m));
       box-sizing: border-box;
-      cursor: pointer;
+      cursor: var(--vaadin-clickable-cursor);
       display: flex;
       gap: var(--vaadin-item-gap, 0 var(--_vaadin-gap-container-inline));
       height: var(--vaadin-item-height, auto);
@@ -25,7 +25,7 @@ export const itemStyles = css`
     }
 
     :host([disabled]) {
-      cursor: not-allowed;
+      cursor: var(--vaadin-disabled-cursor);
       opacity: 0.5;
     }
 

packages/password-field/src/vaadin-password-field-button-base-styles.js

@@ -14,7 +14,7 @@ const passwordFieldBase = css`
     --vaadin-button-padding: 0;
     color: inherit;
     display: block;
-    cursor: default;
+    cursor: var(--vaadin-clickable-cursor);
   }
 
   :host::before {