@vaadin/component-base - npm Package Compare versions

Comparing version 25.0.0-beta4 to 25.0.0-beta5

package.json

 {
   "name": "@vaadin/component-base",
-  "version": "25.0.0-beta4",
+  "version": "25.0.0-beta5",
   "publishConfig": {
@@ -36,3 +36,3 @@ "access": "public"
     "@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",
@@ -42,8 +42,8 @@ "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"
 }

src/define.js

@@ -16,3 +16,3 @@ /**
 
-export function defineCustomElement(CustomElement, version = '25.0.0-beta4') {
+export function defineCustomElement(CustomElement, version = '25.0.0-beta5') {
   Object.defineProperty(CustomElement, 'version', {
@@ -19,0 +19,0 @@ get() {

src/slot-controller.js

@@ -132,2 +132,6 @@ /**
     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).
@@ -207,3 +211,9 @@ return (
       // 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')),
+      );
 
@@ -210,0 +220,0 @@ if (removedNodes.length) {

src/styles/style-props.js

@@ -9,2 +9,24 @@ /**
 
+// 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(
@@ -44,3 +66,4 @@ 'vaadin-base',
         --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);
 
@@ -94,4 +117,16 @@ /* Gap/spacing */
         --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) {
@@ -98,0 +133,0 @@ html {

src/styles/user-colors.js

@@ -19,42 +19,35 @@ /**
           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;
-        }
-      }
     }
   `,
 );

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

238211

0.65%

Lines of code

6726

0.54%

Worsened metrics

Number of low supply chain risk alerts

13

18.18%

Dependency changes

• + Added

  @vaadin/vaadin-themable-mixin@25.0.0-beta5
  (transitive)

• - Removed

  @vaadin/vaadin-themable-mixin@25.0.0-beta4
  (transitive)

• Updated

  @vaadin/vaadin-themable-mixin@25.0.0-beta5