diff --git a/dev/virtual-list.html b/dev/virtual-list.html index 3051e69559..8755cf3b67 100644 --- a/dev/virtual-list.html +++ b/dev/virtual-list.html @@ -18,13 +18,20 @@ root.innerHTML = `
${item.label}
`; }; - const list = document.querySelector('vaadin-virtual-list'); - list.items = items; - list.renderer = renderer; + document.querySelectorAll('vaadin-virtual-list').forEach((list) => { + list.items = items; + list.renderer = renderer; + }); - +
+ +
+
+

Overflow Indicators

+ +
diff --git a/packages/virtual-list/src/styles/vaadin-virtual-list-base-styles.d.ts b/packages/virtual-list/src/styles/vaadin-virtual-list-base-styles.d.ts new file mode 100644 index 0000000000..733fa56a2a --- /dev/null +++ b/packages/virtual-list/src/styles/vaadin-virtual-list-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 virtualListStyles: CSSResult; diff --git a/packages/virtual-list/src/styles/vaadin-virtual-list-base-styles.js b/packages/virtual-list/src/styles/vaadin-virtual-list-base-styles.js new file mode 100644 index 0000000000..de9c167f04 --- /dev/null +++ b/packages/virtual-list/src/styles/vaadin-virtual-list-base-styles.js @@ -0,0 +1,51 @@ +/** + * @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 virtualListStyles = css` + :host { + display: block; + height: 400px; + overflow: auto; + flex: auto; + align-self: stretch; + } + + :host([hidden]) { + display: none !important; + } + + :host(:not([grid])) #items > ::slotted(*) { + width: 100%; + } + + #items { + position: relative; + } + + :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-virtual-list-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; + } +`;