@vaadin/component-base 25.0.0-beta4 → 25.0.0-beta5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.0.0-beta4",
+  "version": "25.0.0-beta5",
   "publishConfig": {
     "access": "public"
   },
@@ -33,15 +33,15 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@vaadin/vaadin-development-mode-detector": "^2.0.0",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-beta4",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta5",
     "@vaadin/vaadin-usage-statistics": "^2.1.0",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-beta4",
-    "@vaadin/test-runner-commands": "25.0.0-beta4",
+    "@vaadin/chai-plugins": "25.0.0-beta5",
+    "@vaadin/test-runner-commands": "25.0.0-beta5",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^21.0.0"
   },
-  "gitHead": "707c30af7ed0afacc13c0afb27d047b043160d1f"
+  "gitHead": "ba59e1404cc4bef2dd685476247f758eb28c9922"
 }

package/src/define.js

@@ -13,7 +13,7 @@ function dashToCamelCase(dash) {
 
 const experimentalMap = {};
 
-export function defineCustomElement(CustomElement, version = '25.0.0-beta4') {
+export function defineCustomElement(CustomElement, version = '25.0.0-beta5') {
   Object.defineProperty(CustomElement, 'version', {
     get() {
       return version;

package/src/slot-controller.js

@@ -129,6 +129,10 @@ export class SlotController extends EventTarget {
   getSlotChildren() {
     const { slotName } = this;
     return Array.from(this.host.childNodes).filter((node) => {
+      // Ignore nodes with data-slot-ignore attribute
+      if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('data-slot-ignore')) {
+        return false;
+      }
       // Either an element (any slot) or a text node (only un-named slot).
       return (
         (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
@@ -203,7 +207,13 @@ export class SlotController extends EventTarget {
 
       // Calling `slot.assignedNodes()` includes whitespace text nodes in case of default slot:
       // unlike comment nodes, they are not filtered out. So we need to manually ignore them.
-      const newNodes = addedNodes.filter((node) => !isEmptyTextNode(node) && !current.includes(node));
+      // Also ignore nodes with data-slot-ignore attribute.
+      const newNodes = addedNodes.filter(
+        (node) =>
+          !isEmptyTextNode(node) &&
+          !current.includes(node) &&
+          !(node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('data-slot-ignore')),
+      );
 
       if (removedNodes.length) {
         this.nodes = current.filter((node) => !removedNodes.includes(node));

package/src/styles/style-props.js

@@ -6,6 +6,28 @@
 import { css } from 'lit';
 import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
+// NOTE: Base color CSS custom properties are explicitly registered as `<color>`
+// here to avoid performance issues in Aura. Aura overrides these properties with
+// values that use complex, nested relative color functions, and without explicit
+// typing, Chrome 142 was found to render components that use them roughly 40% slower.
+[
+  '--vaadin-text-color',
+  '--vaadin-text-color-disabled',
+  '--vaadin-text-color-secondary',
+  '--vaadin-border-color',
+  '--vaadin-border-color-secondary',
+  '--vaadin-background-color',
+].forEach((propertyName) => {
+  CSS.registerProperty({
+    name: propertyName,
+    syntax: '<color>',
+    inherits: true,
+    // Use this initial value so the color stays visible when the property
+    // is set to an invalid value to make debugging a bit easier.
+    initialValue: 'light-dark(black, white)',
+  });
+});
+
 addGlobalThemeStyles(
   'vaadin-base',
   css`
@@ -40,7 +62,8 @@ addGlobalThemeStyles(
         --vaadin-padding-m: 12px;
         --vaadin-padding-l: 16px;
         --vaadin-padding-xl: 24px;
-        --vaadin-padding-container: var(--vaadin-padding-xs) var(--vaadin-padding-s);
+        --vaadin-padding-block-container: var(--vaadin-padding-xs);
+        --vaadin-padding-inline-container: var(--vaadin-padding-s);
 
         /* Gap/spacing */
         --vaadin-gap-xs: 6px;
@@ -89,6 +112,18 @@ addGlobalThemeStyles(
         /* Cursors for interactive elements */
         --vaadin-clickable-cursor: pointer;
         --vaadin-disabled-cursor: not-allowed;
+
+        /* Use units so that the values can be used in calc() */
+        --safe-area-inset-top: env(safe-area-inset-top, 0px);
+        --safe-area-inset-right: env(safe-area-inset-right, 0px);
+        --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
+        --safe-area-inset-left: env(safe-area-inset-left, 0px);
+      }
+
+      @supports not (color: hsl(0 0 0)) {
+        :where(html) {
+          --_vaadin-safari-17-deg: 1deg;
+        }
       }
 
       @media (forced-colors: active) {

package/src/styles/user-colors.js

@@ -16,44 +16,37 @@ addGlobalThemeStyles(
         --vaadin-user-color-0: var(--vaadin-user-color, oklch(0.52 0.2 240));
         --vaadin-user-color-1: oklch(
           from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
-            calc(h - var(--_hue-step) * 2 * var(---_vaadin-safari-17-deg, 1))
+            calc(h - var(--_hue-step) * 2 * var(--_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-2: oklch(
-          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -2 * var(---_vaadin-safari-17-deg, 1))
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -2 * var(--_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-3: oklch(
           from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
-            calc(h - var(--_hue-step) * 0 * var(---_vaadin-safari-17-deg, 1))
+            calc(h - var(--_hue-step) * 0 * var(--_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-4: oklch(
-          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 2 * var(---_vaadin-safari-17-deg, 1))
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 2 * var(--_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-5: oklch(
           from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
-            calc(h - var(--_hue-step) * -2 * var(---_vaadin-safari-17-deg, 1))
+            calc(h - var(--_hue-step) * -2 * var(--_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-6: oklch(
-          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -4 * var(---_vaadin-safari-17-deg, 1))
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -4 * var(--_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-7: oklch(
           from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
-            calc(h - var(--_hue-step) * 4 * var(---_vaadin-safari-17-deg, 1))
+            calc(h - var(--_hue-step) * 4 * var(--_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-8: oklch(
-          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 4 * var(---_vaadin-safari-17-deg, 1))
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 4 * var(--_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-9: oklch(
           from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
-            calc(h - var(--_hue-step) * 6 * var(---_vaadin-safari-17-deg, 1))
+            calc(h - var(--_hue-step) * 6 * var(--_vaadin-safari-17-deg, 1))
         );
       }
-
-      @supports not (color: hsl(0 0 0)) {
-        :where(:root),
-        :where(:host) {
-          ---_vaadin-safari-17-deg: 1deg;
-        }
-      }
     }
   `,
 );