@vaadin/component-base 25.0.0-beta1 → 25.0.0-beta2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +5 -5
  2. package/src/define.js +1 -1
  3. package/src/styles/style-props.js +6 -11
  4. package/src/styles/user-colors.js +23 -11
  5. package/src/virtualizer-iron-list-adapter.js +10 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/component-base",
3
- "version": "25.0.0-beta1",
3
+ "version": "25.0.0-beta2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -33,15 +33,15 @@
33
33
  "dependencies": {
34
34
  "@open-wc/dedupe-mixin": "^1.3.0",
35
35
  "@vaadin/vaadin-development-mode-detector": "^2.0.0",
36
- "@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
36
+ "@vaadin/vaadin-themable-mixin": "25.0.0-beta2",
37
37
  "@vaadin/vaadin-usage-statistics": "^2.1.0",
38
38
  "lit": "^3.0.0"
39
39
  },
40
40
  "devDependencies": {
41
- "@vaadin/chai-plugins": "25.0.0-beta1",
42
- "@vaadin/test-runner-commands": "25.0.0-beta1",
41
+ "@vaadin/chai-plugins": "25.0.0-beta2",
42
+ "@vaadin/test-runner-commands": "25.0.0-beta2",
43
43
  "@vaadin/testing-helpers": "^2.0.0",
44
44
  "sinon": "^21.0.0"
45
45
  },
46
- "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
46
+ "gitHead": "e078f8371ae266f05c7ca1ec25686cc489c83f24"
47
47
  }
package/src/define.js CHANGED
@@ -13,7 +13,7 @@ function dashToCamelCase(dash) {
13
13
 
14
14
  const experimentalMap = {};
15
15
 
16
- export function defineCustomElement(CustomElement, version = '25.0.0-beta1') {
16
+ export function defineCustomElement(CustomElement, version = '25.0.0-beta2') {
17
17
  Object.defineProperty(CustomElement, 'version', {
18
18
  get() {
19
19
  return version;
package/src/styles/style-props.js CHANGED
@@ -27,17 +27,12 @@ addGlobalThemeStyles(
27
27
  --vaadin-border-color: color-mix(in oklab, var(--vaadin-text-color) 48%, transparent); /* Above 3:1 contrast */
28
28
 
29
29
  /* Text colors */
30
- --vaadin-text-color-disabled: color-mix(
31
- in oklab,
32
- var(--vaadin-text-color) 48%,
33
- transparent
34
- ); /* Above 3:1 contrast */
35
- --vaadin-text-color-secondary: color-mix(
36
- in oklab,
37
- var(--vaadin-text-color) 68%,
38
- transparent
39
- ); /* Above 4.5:1 contrast */
40
- --vaadin-text-color: light-dark(#1f1f1f, white); /* Above 7:1 contrast */
30
+ /* Above 3:1 contrast */
31
+ --vaadin-text-color-disabled: color-mix(in oklab, var(--vaadin-text-color) 48%, transparent);
32
+ /* Above 4.5:1 contrast */
33
+ --vaadin-text-color-secondary: color-mix(in oklab, var(--vaadin-text-color) 68%, transparent);
34
+ /* Above 7:1 contrast */
35
+ --vaadin-text-color: light-dark(#1f1f1f, white);
41
36
 
42
37
  /* Padding */
43
38
  --vaadin-padding-xs: 6px;
package/src/styles/user-colors.js CHANGED
@@ -12,36 +12,48 @@ addGlobalThemeStyles(
12
12
  @layer vaadin.base {
13
13
  :where(html) {
14
14
  --_color-count: 10;
15
- --_hue-step: calc(360 / var(--_color-count) - 1);
16
- --vaadin-user-color-0: var(--vaadin-user-color, #4172d5);
15
+ --_hue-step: round(360 / var(--_color-count), 1);
16
+ --vaadin-user-color-0: var(--vaadin-user-color, oklch(0.52 0.2 240));
17
17
  --vaadin-user-color-1: oklch(
18
- from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 1)
18
+ from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
19
+ calc(h - var(--_hue-step) * 2 * var(---_vaadin-safari-17-deg, 1))
19
20
  );
20
21
  --vaadin-user-color-2: oklch(
21
- from var(--vaadin-user-color-0) min(l + 0.1, 0.8) c calc(h - var(--_hue-step) * 2)
22
+ from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -2 * var(---_vaadin-safari-17-deg, 1))
22
23
  );
23
24
  --vaadin-user-color-3: oklch(
24
- from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 3)
25
+ from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
26
+ calc(h - var(--_hue-step) * 0 * var(---_vaadin-safari-17-deg, 1))
25
27
  );
26
28
  --vaadin-user-color-4: oklch(
27
- from var(--vaadin-user-color-0) min(l + 0.1, 0.8) c calc(h - var(--_hue-step) * 4)
29
+ from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 2 * var(---_vaadin-safari-17-deg, 1))
28
30
  );
29
31
  --vaadin-user-color-5: oklch(
30
- from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 5)
32
+ from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
33
+ calc(h - var(--_hue-step) * -2 * var(---_vaadin-safari-17-deg, 1))
31
34
  );
32
35
  --vaadin-user-color-6: oklch(
33
- from var(--vaadin-user-color-0) min(l + 0.1, 0.8) c calc(h - var(--_hue-step) * 6)
36
+ from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -4 * var(---_vaadin-safari-17-deg, 1))
34
37
  );
35
38
  --vaadin-user-color-7: oklch(
36
- from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 7)
39
+ from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
40
+ calc(h - var(--_hue-step) * 4 * var(---_vaadin-safari-17-deg, 1))
37
41
  );
38
42
  --vaadin-user-color-8: oklch(
39
- from var(--vaadin-user-color-0) min(l + 0.1, 0.8) c calc(h - var(--_hue-step) * 8)
43
+ from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 4 * var(---_vaadin-safari-17-deg, 1))
40
44
  );
41
45
  --vaadin-user-color-9: oklch(
42
- from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 9)
46
+ from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
47
+ calc(h - var(--_hue-step) * 6 * var(---_vaadin-safari-17-deg, 1))
43
48
  );
44
49
  }
50
+
51
+ @supports not (color: hsl(0 0 0)) {
52
+ :where(:root),
53
+ :where(:host) {
54
+ ---_vaadin-safari-17-deg: 1deg;
55
+ }
56
+ }
45
57
  }
46
58
  `,
47
59
  );
package/src/virtualizer-iron-list-adapter.js CHANGED
@@ -231,7 +231,16 @@ export class IronListAdapter {
231
231
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
232
232
  this._iterateItems((pidx, vidx) => {
233
233
  oldPhysicalSize += this._physicalSizes[pidx];
234
+ const elementOldPhysicalSize = this._physicalSizes[pidx];
234
235
  this._physicalSizes[pidx] = Math.ceil(this.__getBorderBoxHeight(this._physicalItems[pidx]));
236
+
237
+ if (this._physicalSizes[pidx] !== elementOldPhysicalSize) {
238
+ // Physical size changed, but resize observer may not catch it if the original size is restored quickly.
239
+ // See https://github.com/vaadin/web-components/issues/9077
240
+ this.__resizeObserver.unobserve(this._physicalItems[pidx]);
241
+ this.__resizeObserver.observe(this._physicalItems[pidx], { box: 'border-box' });
242
+ }
243
+
235
244
  newPhysicalSize += this._physicalSizes[pidx];
236
245
  this._physicalAverageCount += this._physicalSizes[pidx] ? 1 : 0;
237
246
  }, itemSet);
@@ -447,7 +456,7 @@ export class IronListAdapter {
447
456
  physicalItems.forEach((el) => {
448
457
  el.style.position = 'absolute';
449
458
  fragment.appendChild(el);
450
- this.__resizeObserver.observe(el);
459
+ this.__resizeObserver.observe(el, { box: 'border-box' });
451
460
  });
452
461
  this.elementsContainer.appendChild(fragment);
453
462
  return physicalItems;