experiment: add scroller base styles and visual tests (#9630)

Author: web-padawan

packages/scroller/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/scroller/src/styles/vaadin-scroller-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 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 scrollerStyles: CSSResult;

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

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 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 scrollerStyles = css`
+  @layer base {
+    :host {
+      display: block;
+      overflow: auto;
+      outline: none;
+    }
+
+    :host([focus-ring]) {
+      outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    }
+
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host([scroll-direction='vertical']) {
+      overflow-x: hidden;
+    }
+
+    :host([scroll-direction='horizontal']) {
+      overflow-y: hidden;
+    }
+
+    :host([scroll-direction='none']) {
+      overflow: hidden;
+    }
+
+    :host([theme~='overflow-indicators'])::before,
+    :host([theme~='overflow-indicators'])::after {
+      content: '';
+      display: none;
+      position: sticky;
+      inset: 0;
+      z-index: 9999;
+      height: 1px;
+      margin-bottom: -1px;
+      background: var(--vaadin-scroller-border-color, var(--vaadin-border-color));
+    }
+
+    :host([theme~='overflow-indicators'])::after {
+      margin-bottom: 0;
+      margin-top: -1px;
+    }
+
+    :host([theme~='overflow-indicators'][overflow~='top'])::before,
+    :host([theme~='overflow-indicators'][overflow~='bottom'])::after {
+      display: block;
+    }
+  }
+`;

packages/scroller/src/styles/vaadin-scroller-core-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 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 scrollerStyles: CSSResult;

packages/scroller/src/styles/vaadin-scroller-core-styles.js

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const scrollerStyles = css`
+  :host {
+    display: block;
+    overflow: auto;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([scroll-direction='vertical']) {
+    overflow-x: hidden;
+  }
+
+  :host([scroll-direction='horizontal']) {
+    overflow-y: hidden;
+  }
+
+  :host([scroll-direction='none']) {
+    overflow: hidden;
+  }
+`;

packages/scroller/src/vaadin-scroller.js

@@ -3,13 +3,14 @@
  * Copyright (c) 2020 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { scrollerStyles } from './styles/vaadin-scroller-core-styles.js';
 import { ScrollerMixin } from './vaadin-scroller-mixin.js';
 
 /**
@@ -40,28 +41,7 @@ class Scroller extends ScrollerMixin(ElementMixin(ThemableMixin(LumoInjectionMix
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: block;
-        overflow: auto;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      :host([scroll-direction='vertical']) {
-        overflow-x: hidden;
-      }
-
-      :host([scroll-direction='horizontal']) {
-        overflow-y: hidden;
-      }
-
-      :host([scroll-direction='none']) {
-        overflow: hidden;
-      }
-    `;
+    return scrollerStyles;
   }
 
   /** @protected */