@vaadin/scroller 23.2.0-alpha4 → 23.2.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/scroller",
-  "version": "23.2.0-alpha4",
+  "version": "23.2.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -36,10 +36,10 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha4",
-    "@vaadin/vaadin-material-styles": "23.2.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha4"
+    "@vaadin/component-base": "23.2.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha5",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha5"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -49,5 +49,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "cbf5f1d0f38ac9b81c65cf9ef5660182e176e598"
+  "gitHead": "c6247fd741d61096d75a71feda4a1faf88b6f0ce"
 }

package/src/vaadin-scroller.d.ts

@@ -3,6 +3,7 @@
  * Copyright (c) 2020 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -21,8 +22,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * -------------| -----------
  * `focus-ring` | Set when the element is focused using the keyboard.
  * `focused`    | Set when the element is focused.
+ * `overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
  */
-declare class Scroller extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement))) {
+declare class Scroller extends FocusMixin(ThemableMixin(ElementMixin(ControllerMixin(HTMLElement)))) {
   /**
    * This property indicates the scroll direction. Supported values are `vertical`, `horizontal`, `none`.
    * When `scrollDirection` is undefined scrollbars will be shown in both directions.

package/src/vaadin-scroller.js

@@ -4,8 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -22,13 +24,15 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * -------------| -----------
  * `focus-ring` | Set when the element is focused using the keyboard.
  * `focused`    | Set when the element is focused.
+ * `overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
  *
  * @extends HTMLElement
  * @mixes ThemableMixin
+ * @mixes ControllerMixin
  * @mixes ElementMixin
  * @mixes FocusMixin
  */
-class Scroller extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class Scroller extends FocusMixin(ElementMixin(ControllerMixin(ThemableMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
@@ -85,6 +89,14 @@ class Scroller extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     };
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.__overflowController = new OverflowController(this);
+    this.addController(this.__overflowController);
+  }
+
   /**
    * Override method inherited from `FocusMixin` to mark the scroller as focused
    * only when the host is focused.

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/scroller",
-  "version": "23.2.0-alpha4",
+  "version": "23.2.0-alpha5",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-scroller",
-          "description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```\n<vaadin-scroller>\n  <div>Content</div>\n</vaadin-scroller>\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.",
+          "description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```\n<vaadin-scroller>\n  <div>Content</div>\n</vaadin-scroller>\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.",
           "attributes": [
             {
               "name": "scroll-direction",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/scroller",
-  "version": "23.2.0-alpha4",
+  "version": "23.2.0-alpha5",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-scroller",
-          "description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```\n<vaadin-scroller>\n  <div>Content</div>\n</vaadin-scroller>\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.",
+          "description": "`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.\n\n```\n<vaadin-scroller>\n  <div>Content</div>\n</vaadin-scroller>\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.",
           "extension": true,
           "attributes": [
             {