@vaadin/scroller 25.0.0-beta3 → 25.0.0-beta4

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 (6) hide show
  1. package/package.json +8 -8
  2. package/src/styles/vaadin-scroller-base-styles.js +41 -15
  3. package/src/vaadin-scroller.d.ts +24 -1
  4. package/src/vaadin-scroller.js +24 -1
  5. package/web-types.json +2 -2
  6. package/web-types.lit.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/scroller",
3
- "version": "25.0.0-beta3",
3
+ "version": "25.0.0-beta4",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -34,20 +34,20 @@
34
34
  ],
35
35
  "dependencies": {
36
36
  "@open-wc/dedupe-mixin": "^1.3.0",
37
- "@vaadin/a11y-base": "25.0.0-beta3",
38
- "@vaadin/component-base": "25.0.0-beta3",
39
- "@vaadin/vaadin-themable-mixin": "25.0.0-beta3",
37
+ "@vaadin/a11y-base": "25.0.0-beta4",
38
+ "@vaadin/component-base": "25.0.0-beta4",
39
+ "@vaadin/vaadin-themable-mixin": "25.0.0-beta4",
40
40
  "lit": "^3.0.0"
41
41
  },
42
42
  "devDependencies": {
43
- "@vaadin/chai-plugins": "25.0.0-beta3",
44
- "@vaadin/test-runner-commands": "25.0.0-beta3",
43
+ "@vaadin/chai-plugins": "25.0.0-beta4",
44
+ "@vaadin/test-runner-commands": "25.0.0-beta4",
45
45
  "@vaadin/testing-helpers": "^2.0.0",
46
- "@vaadin/vaadin-lumo-styles": "25.0.0-beta3"
46
+ "@vaadin/vaadin-lumo-styles": "25.0.0-beta4"
47
47
  },
48
48
  "web-types": [
49
49
  "web-types.json",
50
50
  "web-types.lit.json"
51
51
  ],
52
- "gitHead": "4b2006b0e2f4fc131f5483223b852d34224e7b9a"
52
+ "gitHead": "707c30af7ed0afacc13c0afb27d047b043160d1f"
53
53
  }
package/src/styles/vaadin-scroller-base-styles.js CHANGED
@@ -8,9 +8,18 @@ import { css } from 'lit';
8
8
 
9
9
  export const scrollerStyles = css`
10
10
  :host {
11
+ --_indicator-height: var(--vaadin-scroller-overflow-indicator-height, 1px);
12
+ /* Don't let these properties inherit */
13
+ --vaadin-scroller-padding-block: 0px;
14
+ --vaadin-scroller-padding-inline: 0px;
15
+ --vaadin-scroller-overflow-indicator-top-opacity: 0;
16
+ --vaadin-scroller-overflow-indicator-bottom-opacity: 0;
11
17
  display: block;
12
18
  overflow: auto;
13
19
  outline: none;
20
+ flex: 1;
21
+ box-sizing: border-box;
22
+ padding: 0 var(--vaadin-scroller-padding-inline);
14
23
  }
15
24
 
16
25
  :host([focus-ring]) {
@@ -33,27 +42,44 @@ export const scrollerStyles = css`
33
42
  overflow: hidden;
34
43
  }
35
44
 
36
- :host([theme*='overflow-indicator'])::before,
37
- :host([theme*='overflow-indicator'])::after {
45
+ :host::before,
46
+ :host::after {
38
47
  content: '';
39
- display: none;
48
+ display: block;
49
+ opacity: 0;
40
50
  position: sticky;
41
- inset: 0;
51
+ inset: 0 calc(var(--vaadin-scroller-padding-inline) * -1);
42
52
  z-index: 9999;
43
- height: 1px;
44
- margin-bottom: -1px;
45
- background: var(--vaadin-scroller-border-color, var(--vaadin-border-color-secondary));
53
+ pointer-events: none;
54
+ box-sizing: border-box;
55
+ height: var(--_indicator-height);
56
+ margin-inline: calc(var(--vaadin-scroller-padding-inline) * -1);
57
+ background: var(--vaadin-border-color-secondary);
46
58
  }
47
59
 
48
- :host([theme*='overflow-indicator'])::after {
49
- margin-bottom: 0;
50
- margin-top: -1px;
60
+ :host::before {
61
+ margin-bottom: calc(var(--vaadin-scroller-padding-block) - var(--_indicator-height));
51
62
  }
52
63
 
53
- :host([theme~='overflow-indicator-top'][overflow~='top'])::before,
54
- :host([theme~='overflow-indicators'][overflow~='top'])::before,
55
- :host([theme~='overflow-indicators'][overflow~='bottom'])::after,
56
- :host([theme~='overflow-indicator-bottom'][overflow~='bottom'])::after {
57
- display: block;
64
+ :host::after {
65
+ margin-top: calc(var(--vaadin-scroller-padding-block) - var(--_indicator-height));
66
+ }
67
+
68
+ :host([overflow~='top'])::before {
69
+ opacity: var(--vaadin-scroller-overflow-indicator-top-opacity);
70
+ }
71
+
72
+ :host([overflow~='bottom'])::after {
73
+ opacity: var(--vaadin-scroller-overflow-indicator-bottom-opacity);
74
+ }
75
+
76
+ :host([theme~='overflow-indicator-top'][overflow~='top']),
77
+ :host([theme~='overflow-indicators'][overflow~='top']) {
78
+ --vaadin-scroller-overflow-indicator-top-opacity: 1;
79
+ }
80
+
81
+ :host([theme~='overflow-indicators'][overflow~='bottom']),
82
+ :host([theme~='overflow-indicator-bottom'][overflow~='bottom']) {
83
+ --vaadin-scroller-overflow-indicator-bottom-opacity: 1;
58
84
  }
59
85
  `;
package/src/vaadin-scroller.d.ts CHANGED
@@ -16,13 +16,36 @@ import { ScrollerMixin } from './vaadin-scroller-mixin.js';
16
16
  * </vaadin-scroller>
17
17
  * ```
18
18
  *
19
- * The following attributes are exposed for styling:
19
+ * ### Styling
20
+ *
21
+ * The following state attributes are available for styling:
20
22
  *
21
23
  * Attribute | Description
22
24
  * -------------| -----------
23
25
  * `focus-ring` | Set when the element is focused using the keyboard.
24
26
  * `focused` | Set when the element is focused.
25
27
  * `overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
28
+ *
29
+ * ### Built-in Theme Variants
30
+ *
31
+ * `<vaadin-scroller>` supports the following theme variants:
32
+ *
33
+ * Theme variant | Description
34
+ * -----------------------------------------|---------------
35
+ * `theme="overflow-indicators"` | Shows visual indicators at the top and bottom when the content is scrolled
36
+ * `theme="overflow-indicator-top"` | Shows the visual indicator at the top when the content is scrolled
37
+ * `theme="overflow-indicator-top-bottom"` | Shows the visual indicator at the bottom when the content is scrolled
38
+ *
39
+ * ### Custom CSS Properties
40
+ *
41
+ * The following custom CSS properties are available for styling:
42
+ *
43
+ * Custom CSS property | Description
44
+ * -----------------------------------|-------------
45
+ * `--vaadin-scroller-padding-block` | The CSS padding applied to top and bottom edges
46
+ * `--vaadin-scroller-padding-inline` | The CSS padding applied to left and right edges
47
+ *
48
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
26
49
  */
27
50
  declare class Scroller extends ScrollerMixin(ThemableMixin(ElementMixin(HTMLElement))) {}
28
51
 
package/src/vaadin-scroller.js CHANGED
@@ -22,7 +22,9 @@ import { ScrollerMixin } from './vaadin-scroller-mixin.js';
22
22
  * </vaadin-scroller>
23
23
  * ```
24
24
  *
25
- * The following attributes are exposed for styling:
25
+ * ### Styling
26
+ *
27
+ * The following state attributes are available for styling:
26
28
  *
27
29
  * Attribute | Description
28
30
  * -------------| -----------
@@ -30,6 +32,27 @@ import { ScrollerMixin } from './vaadin-scroller-mixin.js';
30
32
  * `focused` | Set when the element is focused.
31
33
  * `overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
32
34
  *
35
+ * ### Built-in Theme Variants
36
+ *
37
+ * `<vaadin-scroller>` supports the following theme variants:
38
+ *
39
+ * Theme variant | Description
40
+ * -----------------------------------------|---------------
41
+ * `theme="overflow-indicators"` | Shows visual indicators at the top and bottom when the content is scrolled
42
+ * `theme="overflow-indicator-top"` | Shows the visual indicator at the top when the content is scrolled
43
+ * `theme="overflow-indicator-top-bottom"` | Shows the visual indicator at the bottom when the content is scrolled
44
+ *
45
+ * ### Custom CSS Properties
46
+ *
47
+ * The following custom CSS properties are available for styling:
48
+ *
49
+ * Custom CSS property | Description
50
+ * -----------------------------------|-------------
51
+ * `--vaadin-scroller-padding-block` | The CSS padding applied to top and bottom edges
52
+ * `--vaadin-scroller-padding-inline` | The CSS padding applied to left and right edges
53
+ *
54
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
55
+ *
33
56
  * @customElement
34
57
  * @extends HTMLElement
35
58
  * @mixes ThemableMixin
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/scroller",
4
- "version": "25.0.0-beta3",
4
+ "version": "25.0.0-beta4",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-scroller",
11
- "description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```html\n<vaadin-scroller>\n <div>Content</div>\n</vaadin-scroller>\n```\n\nThe following attributes are exposed for styling:\n\nAttribute | Description\n-------------| -----------\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused` | Set when the element is focused.\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.",
11
+ "description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```html\n<vaadin-scroller>\n <div>Content</div>\n</vaadin-scroller>\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------| -----------\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused` | Set when the element is focused.\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\n### Built-in Theme Variants\n\n`<vaadin-scroller>` supports the following theme variants:\n\nTheme variant | Description\n-----------------------------------------|---------------\n`theme=\"overflow-indicators\"` | Shows visual indicators at the top and bottom when the content is scrolled\n`theme=\"overflow-indicator-top\"` | Shows the visual indicator at the top when the content is scrolled\n`theme=\"overflow-indicator-top-bottom\"` | Shows the visual indicator at the bottom when the content is scrolled\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description\n-----------------------------------|-------------\n`--vaadin-scroller-padding-block` | The CSS padding applied to top and bottom edges\n`--vaadin-scroller-padding-inline` | The CSS padding applied to left and right edges\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "scroll-direction",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/scroller",
4
- "version": "25.0.0-beta3",
4
+ "version": "25.0.0-beta4",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-scroller",
19
- "description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```html\n<vaadin-scroller>\n <div>Content</div>\n</vaadin-scroller>\n```\n\nThe following attributes are exposed for styling:\n\nAttribute | Description\n-------------| -----------\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused` | Set when the element is focused.\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.",
19
+ "description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```html\n<vaadin-scroller>\n <div>Content</div>\n</vaadin-scroller>\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------| -----------\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused` | Set when the element is focused.\n`overflow` | Set to `top`, `bottom`, `start`, `end`, all of them, or none.\n\n### Built-in Theme Variants\n\n`<vaadin-scroller>` supports the following theme variants:\n\nTheme variant | Description\n-----------------------------------------|---------------\n`theme=\"overflow-indicators\"` | Shows visual indicators at the top and bottom when the content is scrolled\n`theme=\"overflow-indicator-top\"` | Shows the visual indicator at the top when the content is scrolled\n`theme=\"overflow-indicator-top-bottom\"` | Shows the visual indicator at the bottom when the content is scrolled\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description\n-----------------------------------|-------------\n`--vaadin-scroller-padding-block` | The CSS padding applied to top and bottom edges\n`--vaadin-scroller-padding-inline` | The CSS padding applied to left and right edges\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {