experiment: add progress-bar base styles and visual tests (#9615)

* init base styles

* base styles

* add visual tests

* fix: wrap styles with base layer

* chore: align copyright years with core styles

* test: import src version of the component in base visual test

* chore: do not publish base styles to npm

* chore: fix Stylelint errors

* test: update visual test screenshots

* fix border radius on value part

* test: update screenshots

* fix: support reduced motion preference

* chore: move stylelint-disable comment

---------

Co-authored-by: web-padawan <iamkulykov@gmail.com>

Author: jouni

packages/progress-bar/package.json

@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",

packages/progress-bar/src/styles/vaadin-progress-bar-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const progressBarStyles: CSSResult;

packages/progress-bar/src/styles/vaadin-progress-bar-base-styles.js

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/style-props.js';
+import { css } from 'lit';
+
+export const progressBarStyles = css`
+  @layer base {
+    :host {
+      display: block;
+      width: 100%; /* prevent collapsing inside non-stretching column flex */
+      height: 0.5lh;
+      contain: layout size;
+    }
+
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    [part='bar'] {
+      box-sizing: border-box;
+      height: 100%;
+      --_padding: var(--vaadin-progress-bar-padding, 0px);
+      padding: var(--_padding); /* stylelint-disable-line length-zero-no-unit */
+      background: var(--vaadin-progress-bar-background, var(--vaadin-background-container));
+      border-radius: var(--vaadin-progress-bar-border-radius, var(--vaadin-radius-m));
+      border: var(--vaadin-progress-bar-border-width, 1px) solid
+        var(--vaadin-progress-bar-border-color, var(--vaadin-border-color));
+    }
+
+    [part='value'] {
+      box-sizing: border-box;
+      height: 100%;
+      width: calc(var(--vaadin-progress-value) * 100%);
+      background: var(--vaadin-progress-bar-value-background, var(--vaadin-border-color-strong));
+      border-radius: calc(
+        var(--vaadin-progress-bar-border-radius, var(--vaadin-radius-m)) - var(
+            --vaadin-progress-bar-border-width,
+            1px
+          ) - var(--_padding)
+      );
+      transition: width 150ms;
+    }
+
+    /* Indeterminate progress */
+    :host([indeterminate]) [part='value'] {
+      --_w-min: clamp(0.5em, 5%, 1em);
+      --_w-max: clamp(1em, 20%, 8em);
+      animation: indeterminate var(--vaadin-progress-bar-animation-duration, 1s) linear infinite alternate;
+      width: var(--_w-min);
+    }
+
+    :host([indeterminate][aria-valuenow]) [part='value'] {
+      animation-delay: 150ms;
+    }
+
+    @keyframes indeterminate {
+      0% {
+        animation-timing-function: ease-in;
+      }
+
+      20% {
+        margin-inline-start: 0%;
+        width: var(--_w-max);
+      }
+
+      50% {
+        margin-inline-start: calc(50% - var(--_w-max) / 2);
+      }
+
+      80% {
+        width: var(--_w-max);
+        margin-inline-start: calc(100% - var(--_w-max));
+        animation-timing-function: ease-out;
+      }
+
+      100% {
+        width: var(--_w-min);
+        margin-inline-start: calc(100% - var(--_w-min));
+      }
+    }
+
+    @keyframes indeterminate-reduced {
+      100% {
+        opacity: 0.2;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      [part='value'] {
+        transition: none;
+      }
+
+      :host([indeterminate]) [part='value'] {
+        width: 25%;
+        animation: indeterminate-reduced 2s linear infinite alternate;
+      }
+    }
+  }
+`;

packages/progress-bar/test/visual/base/progress-bar.test.js

@@ -0,0 +1,23 @@
+import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { visualDiff } from '@web/test-runner-visual-regression';
+import '../../../src/vaadin-progress-bar.js';
+
+describe('progress-bar', () => {
+  let div, element;
+
+  beforeEach(() => {
+    div = document.createElement('div');
+    div.style.display = 'inline-block';
+    div.style.width = '200px';
+    element = fixtureSync('<vaadin-progress-bar value="0.1"></vaadin-progress-bar>', div);
+  });
+
+  it('basic', async () => {
+    await visualDiff(div, 'basic');
+  });
+
+  it('RTL', async () => {
+    element.setAttribute('dir', 'rtl');
+    await visualDiff(div, 'rtl-basic');
+  });
+});